ビンゴ抽選をjQueryで作る!

ビンゴ抽選をjQueryで作る! javascript
この記事は約9分で読めます。
スポンサーリンク

Youtuber江頭さん、元SMAP草薙さんのチャンネル登録者数が100万人達成したよって動画見てなんかすごい時代だなぁ~って思いつつ。
今回はjQueryでクリック数の取得をしてみたいと思います。
さらに、応用編があるのでそちらも見てくださると嬉しいです!
コピペで出来るのでよかったら使ってください。
まずはDEMOでどの様な動きかご確認ください。

クリックで数をカウントする

DEMO

現在のクリック数0

ここを押してね!

HTML

<div class="demo1">
 <p>現在のクリック数<span>0</span></p>
 <div class="btn">ここを押してね!</div>
</div>

CSS

.demo1 {
 display: block;
 height: 300px;
 text-align: center;
}
.demo1 > p {
 font-size: 32px;
 margin-bottom: 32px;
}
.demo1 > p span {
 display: inline-block;
 border: 1px solid #515151;
 padding: 0px 12px;
 margin-left: 15px;
 border-radius: 8px;
 font-weight: bold;
 color: #03dba7;
}
.btn {
 padding: 9px 0;
 display: block;
 cursor: pointer;
 width: 336px;
 font-size: 30px;
 border-radius: 8px;
 margin: 0 auto;
 background: #03dba7;
}

jQuery

var num = 0;
$(".btn").on("click", function() {
 num++
 $(".demo1 > p span").text(num);
});

僕はクリッカー系ゲームが大好きでベッドでずっとiphoneをタップしてるから
クリックで数字が変化するといつまでもクリックし続けちゃう癖がありました。
次に、クリックしたら数を表示する機能を使いランダム数を表示して抽選を作ったりしてみます。

クリックでランダム数(乱数)を表示して抽選みたいなことをしてみる

ランダム数(乱数)を使って抽選をする場合。
1数が決められた範囲の整数、例として「1~50」まででランダムな数を取得。
2一度出た数字は出ちゃいけない。
3出た数字を羅列して後から見返せるようにする。
この1~3を踏まえて作ってみます。

DEMO

抽選番号は番です!

抽選する

    HTML

    「抽選する」ボタンを押すと「.lottery ul」の中に「li」を作りそこに番号をどんどん入れてくイメージです。

    <div class="demo2">
     <p>抽選番号は<span></span>番です!</p>
     <div class="btn2">抽選する</div>
     <div class="lottery">
      <ul>
      </ul>
     </div>
    </div>
    

    CSS

    .demo2 {
     display: block;
     min-height: 200px;
     padding-bottom: 40px;
     text-align: center;
    }
    .demo2 > p {
     font-size: 32px;
     margin-bottom: 32px !important;
    }
    .demo2 > p span {
     display: inline-block;
     border: 1px solid #515151;
     padding: 0px 12px;
     margin-left: 15px !important;
     border-radius: 8px;
     font-weight: bold;
     color: #03dba7;
    }
    .btn2 {
     padding: 9px 0;
     display: block;
     cursor: pointer;
     width: 336px;
     font-size: 30px;
     border-radius: 8px;
     margin: 0 auto !important;
     background: #03dba7;
    }
    .lottery {
     width: 100%;
     padding: 20px 26px;
    }
    .lottery ul {
     text-align: left;
    }
    .lottery li {
     width: 120px;
     padding: 4px 12px;
     text-align: center;
     margin: 0 6px 6px 0 !important;
     display: inline-block;
     background: #cdf7ed;
     border-radius: 8px;
     border: 2px solid #03dba7;
    }
    

    jQuery

    jQuery(function($) {
     // ランダムな数字の上限
     var kazu = 50;
     // ボタンを押すと出る数字を格納する「lottery」を作る
     var lottery = [];
     var i;
     $(".btn2").on("click", function() {
      i = 0;
      // 「kazu(50)」まで行う
      if($(".lottery li").length < kazu) {
       // 1~50までのランダムな数字を「num2」に入れる
       var num2 = Math.ceil(Math.random()*kazu);
       // 「i(0)」が「kazu(50)」になるまで繰り返す
       while(i <= kazu) {
        // 「i(0)」に+1する
        i++
        // 「lottery(出た数字全て)」に「num2(1~50までのランダムな数字)」がなかったら
        if($.inArray(num2, lottery) === -1) {
         // 「lottery」に格納
         lottery.push(num2);
         // 抽選番号は〇番です!に数字を表示
         $(".demo2 > p span").text(num2);
         // 下の結果のリストに表示(appendを使う場合、特殊文字の前に「\」が必要)
         $(".lottery ul").append("\<li\>"+num2+"\<\/li\>");
         // whileループを抜ける
         break;
        // 「lottery(出た数字全て)」に「num2(1~50までのランダムな数字)」があったら
        } else {
         // 「num2(1~50までのランダムな数字)」に新しい1~50までのランダムな数字を代入して再度whileで処理を繰り替えす
         num2 = Math.ceil(Math.random()*kazu);
        }
       }
      // 「kazu(50)」以上になったら
      } else {
       // ボタンの色とテキストを変えて終了
       $(".btn2").text("番号が全て出ました!").css({background: "#e6e6e6", border: "2px solid #515151"});
      }
     });
    });
    

    簡単にできるものだと思っていた抽選も、結構な行数になってしましました。
    これもっと簡単にできるはずだったのにな。。。
    クリックしたら数を表示する機能をリロードボタンを押しても保持しておく方法を紹介して終わろうと思います。
    左上についてる「ブラウザのリロードボタン」と右クリックの「再読み込み」と「F5」と「ctr + R」のリロードには対応しておりません。
    この辺の対応ができたらいいけど、よくわからず。
    分かる方いましたらコメントいただけると嬉しいです。

    クリックした数字をリロードしても保持する

    DEMO

    現在のクリック数

    ここを押してね!
    リロード

    HTML

    <div class="demo3">
     <p>現在のクリック数<span></span></p>
     <div class="btn3">ここを押してね!</div>
     <div class="reload">リロード</div>
    </div>
    

    CSS

    .demo3 {
     display: block;
     height: 300px;
     text-align: center;
    }
    .demo3 > p {
     font-size: 32px;
     margin-bottom: 32px !important;
    }
    .demo3 > p span {
     display: inline-block;
     border: 1px solid #515151;
     padding: 0px 12px;
     margin-left: 15px !important;
     border-radius: 8px;
     font-weight: bold;
     color: #03dba7;
    }
    .btn3 {
     padding: 9px 0;
     display: block;
     cursor: pointer;
     width: 336px;
     font-size: 30px;
     border-radius: 8px;
     margin: 0 auto !important;
     background: #03dba7;
    }
    .reload {
     padding: 9px 0;
     display: block;
     cursor: pointer;
     width: 336px;
     font-size: 30px;
     border-radius: 8px;
     margin: 60px auto 0 !important;
     background: #ff75b3;
    }
    

    jQuery

    // URLの「#」以降を取得して「#」を削除し数字だけにする
    var hush = location.hash.slice(1);
    var num3 = 0;
    // 「#」があったら
    if(hush) {
     // 現在のクリック数[]に数字を入れる
     $(".demo3 > p span").text(hush);
     // num3に数字を入れる
     num3 = hush;
    // 「#」が無かったら
    } else {
     // 現在のクリック数[]に0を入れる
     $(".demo3 > p span").text(0);
    }
    $(".btn3").on("click", function() {
     // num3に+1する
     num3++
     // 現在のクリック数[]に「num3」を入れる
     $(".demo3 > p span").text(num3);
    });
    $(".reload").on("click", function() {
     // 現在の「#」を含めたURL
     var url = location.href;
     // 現在の「#」を含めたURLから今ついてる「#」を削除
     var nohush = url.replace(/#.*$/,"");
     // 「#」を削除したURLに新たに今の「#」を追加
     location.href = nohush + "#" + num3;
     // リロード
     location.reload();
    });
    
    SNSフォローボタン
    エンデ・バタローをフォローする
    javascriptjQuery

    東京に住み始めて4年目。

    前は神戸に。その前は名古屋に住んでいました。

    ある年の冬、車で島根県へ旅行に出かけました。
    同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
    車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

    フロントエンドを始めて4年目になります。
    エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
    仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

    エンデ・バタローをフォローする
    シェアする
    スポンサーリンク
    初めてのブログ

    コメント

    タイトルとURLをコピーしました