自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

jQuery

  • JavaScript(jQuery)で神経衰弱
    canvas未使用、JavaScript(jQuery)で神経衰弱を作ってみた。 突貫で作ったためかなり雑ではあるが、トランプを使用したゲームに流用できそうだ。 デモページ カードの素材は ( https://opengameart.org/content/playing-cards-vector-png )より。ウラ面は自前で作った。 https://seiya0723.github.io/memory_cards_game/ ソースコード https://github.com/seiya0723/memory_cards_game HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <style> img { width:200px; } </style> </head> <body> <table id="table"></table> </body> </html> JavaScript window.addEventListener("load" , function (){ // カードの画像: https://opengameart.org/content/playing-cards-vector-png //カードのデータ形式 var CARD_DATA = [ { "number":1,"src":"img/ace_of_clubs.png" }, { "number":1,"src":"img/ace_of_diamonds.png" }, { "number":1,"src":"img/ace_of_hearts.png" }, { "number":1,"src":"img/ace_of_spades.png" }, { "number":2,"src":"img/2_of_clubs.png" }, { "number":2,"src":"img/2_of_diamonds.png" }, { "number":2,"src":"img/2_of_hearts.png" }, { "number":2,"src":"img/2_of_spades.png" }, { ...
    続きを読む

  • JavaScript(jQuery)でQRコードを表示させる
    例えば、ユーザーの一部がPCでの操作をやめて、スマホで操作したいと思ったとする。 こういう時QRコードを表示させる、ブラウザのアドオンや機能を使えば良いが、ユーザーにそれを強いるのはやや酷である。 そこで、jQueryを使用して、QRコードを簡単に表示させると良いだろう。 コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <script> window.addEventListener("load" , function (){ let qrtext = location.href; let utf8qrtext = unescape(encodeURIComponent(qrtext)); $("#qrcode").html(""); $("#qrcode").qrcode({width:160,height:160,text:utf8qrtext}); }); </script> </head> <body> <div id="qrcode"></div> </body> </html> 動かすとこうなる。 結論 下記を参照。 https://github.com/jeromeetienne/jquery-qrcode ...

  • 【jQuery】数値入力フォームを押しっぱなしで入力する仕様に仕立てる
    以前、『【jQuery】数値入力フォームをボタンで入力する仕様に仕立てる』で解説したフォームを、ボタン押しっぱなしでも入力できるように仕立てる。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <form action=""> <div class="spinner_area"> <input class="spinner" type="number" value="0" max="10" min="0"> <button class="spinner_button" type="button" name="minus" value="-1">ー</button> <button class="spinner_button" type="button" name="plus" value="1" >＋</button> </div> </form> </body> </html> CSS .spinner_button{ user-select: none; cursor:pointer; padding:0.5rem; width: auto; vertical-align: middle; } .spinner_area input{ padding: 0.5rem; border: 0.1rem solid gray; border-radius: 0.25rem; font-size: ...
    続きを読む

  • 【jQuery】数値入力フォームをボタンで入力する仕様に仕立てる
    数値入力フォーム。キーボードを使わず、ボタン入力で行いたい場合、JavaScriptを使う必要がある。 今回は更に短くかけるよう、jQueryで表現した。なお、再利用を想定して、装飾は全く行っていない。 ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <form action=""> <input type="number" name="amount" value="0" readonly> <input type="button" name="minus" value="減らす"> <input type="button" name="plus" value="増やす"> </form> </body> </html> JavaScript window.addEventListener("load" , function (){ $("[name='plus']").on("click", function(){ amount_add(this,true); ...
    続きを読む

  • 【jQuery】Ajaxで郵便番号検索を行う【通販サイトなどの住所登録に有効】
    通販サイトなどでは、郵便番号を入力すると、住所の入力を自動で行ってくれる。 本記事では郵便番号検索の実装を解説する。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <input id="postcode" type="text" name="postcode" placeholder="ここに郵便番号を入力する(ハイフン不要)"> <input id="postcode_search" type="button" value="郵便番号検索"> <input id="prefecture" type="text" name="prefecture" placeholder="都道府県"> ...
    続きを読む

  • 【jQuery】selectタグで年月日検索をする【うるう年対応】
    年月日検索をする時、年だけ、月だけ指定して検索する場合がある。この場合、年月日全てを指定するflatpickrでは対応できない。 この場合はselectタグを使用して検索をする。だが、月ごとに日数は異なる。うるう年では2月は29日になる。それに対応させるためには、JavaScriptを書く必要がある。 本記事ではjQueryを使用して、なるべく短く年月日検索を行うselectタグを作る。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta ...
    続きを読む

  • 【Django】canvasで描画した画像をAjax(jQuery)で送信【お絵かきBBS、イラストチャット、ゲームのスクショ共有などに】
    例えば、チャットサイト、掲示板サイトでユーザーが描画したイラストを投稿できる形式にしたい時。 ユーザーが手元の端末でペイントツールを起動して画像を保存して、サイトに添付して貼り付けるのはやや面倒。それだけでなく、サイト独自のレギュレーション(お題に沿ってイラストを付け加える形式、指定された色しか使ってはいけないなど)がある場合、ユーザーのペイントツールでそれを強いるのは不可能に近い。 そこで、サイト上 ...
    続きを読む

  • 【jQuery】ボタン式の横スライダーを自作する【通販サイト・コンテンツ共有サイトなどに】
    通販サイトなどでよくある。横スクロール型のスライダーを作る。slick.jsなどを使えば簡単に実現できるが、かえって複雑なので、自作した。 ソースコード HTML。jQueryを読み込み、別途JavaScriptとCSSを読み込む。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <!--jquery読み込み--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="preview_control_area"> <div class="data_preview_area"> <div class="data_preview_frame"><div class="data_preview_content&qu ...
    続きを読む

  • 【jQuery】HTML、CSS、JS合わせて100行以内でカルーセルを自作する【自動スライド】
    カルーセルと言えば、slick.js等のライブラリがあるが、たかだか自動的にスライドするだけのシンプルなカルーセルをサイトの一部分に実装させるためだけにライブラリをインストールさせるのはやや大げさだ。 そこで、今回はカルーセルをjQueryを使用した上で自作する。書く必要のあるコードはHTMLが約30行、CSSが約20行、JSが約40行の合計100行足らずで実現できる。 ソースコードと解説 HTML。C ...
    続きを読む

  • FormDataをformタグではなく、オブジェクトにキーと値をセットした上でAjax送信
    タイトルの説明。 通常、Ajaxでサーバーにリクエストを送信する時、下記のようにFormDataクラスを使用して送信する。 let form_elem = "#form_area"; let data = new FormData( $(form_elem).get(0) ); let url = $(form_elem).prop("action"); let method = $(form_elem).prop("method"); $.ajax({ url: url, type: method, data: data, processData: false, contentType: false, dataType: 'json' }).done( function(data, status, xhr ) { //Done }).fail( function(xhr, status, error) { //Fail }); しかし、送信したいデータがいつもこのようにformタグで囲まれているとも限らない。 そこで、FormDataクラスに引数を入れずにオブジェクトを作り、オブジェクトにキーと値をセットしてAja ...
    続きを読む