jQueryでランダム抽選プログラムの作り方を解説

jQueryで、選択した文字の中からランダムで1つを選ぶ抽選プログラムの作り方を解説します。

簡単なおみくじや占いなど、サイトやブログのちょっとしたお遊びコンテンツとして楽しいプログラムです。

まずは完成例をご確認ください

今回解説するソースコードを書くと、こんな感じの抽選プログラムが実現できます。

作ってみたいと思った方は下記のソースコードをチェックしましょう！

JavaScript(jQuery)

各項目に解説を付けたJavaScriptプログラムを書きましたのでご確認ください。

もちろん、jQueryライブラリの読み込みは必須です。

<!-- jQuery読込 既に読み込んでいる場合は不要 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQueryで抽選プログラム -->
<script>
$(function(){
    //候補を配列で設定
    var aryList = ['大吉','吉','中吉','小吉','末吉','凶','大凶'];
    
    //グローバル変数
    var key = 0;
    var max_len = aryList.length - 1;
    var randStart;
    var speed = 20; //シャッフルスピード
    
    //文字シャッフル関数
    //20ミリ秒毎に候補の文字列をシャッフルさせる
    var randShuffle= function(){
        if(key > max_len) key = 0;
        $('.rand_name').text(aryList[key]);
        key++;
    }
    //文字シャッフル開始
    randStart = setInterval(randShuffle, speed);
    
    //回転を止める（抽選結果）
    $('.stop').click(function(){
        var random = Math.floor(Math.random() * (max_len + 1)); //ランダムで配列の数を取得
        $('.rand_name').text(aryList[random]); //対象の数値に該当する文字を表示
        clearInterval(randStart); //シャッフルストップ
        $(this).hide(); //止めるボタンの非表示
        $('.restart').show(); //再開ボタンの表示
    });
    
    //回転を再開する
    $('.restart').click(function(){
        $(this).hide(); //再開ボタンの非表示
        $('.stop').show(); //止めるボタンの表示
        randStart = setInterval(randShuffle, speed); //シャッフル再開
    });
    
});
</script>
var aryList = ['大吉','吉','中吉','小吉','末吉','凶','大凶'];

ここの文字列を置き換えるだけで、お好きな候補をランダム抽選させることが出来ます。
また、配列の数にも制限がないので、増やしたり減らしたりも自由です。

シャッフル演出をsetIntervalで実現

一定時間毎に処理を行うsetIntervalを使うことで、候補となる文字列をシャッフルさせてルーレットを回しているように魅せ、視覚的に楽しめる処理を盛り込んでいます。
目押しはできないように、ボタン押下時に再度ランダムで決定する処理としました。

CSS

cssはシンプルなデザインとしましたが、各サイトに合うようにお好みで調整してください。

.rand_area{
    box-sizing: border-box;
    border: 2px solid #CCC;
    padding: 10px 10px 20px 10px;
    text-align: center;
}

.rand_name{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.rand_area button{
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    padding: 5px 15px;
    color: #FFF;
    margin-top: 10px;
    cursor: pointer;
}

.stop{
    background-color: #47bc68;
}

.restart{
    background-color: #ff8282;
}

HTML

先ほどのcssと合わせて完成となります。

ボタンはストップ用とリスタート用を用意し、状態によってそれぞれ表示・非表示が切り替わります。

<div class="rand_area">
    <div class="rand_name"></div>
    <button type="button" class="stop">ストップ！</button>
    <button type="button" class="restart" style="display: none;">もう一度</button>
</div>

お手軽にサイトやブログにランダム抽選プログラムを実装できますので、是非お試しください。

わざわざ作るのが面倒くさい、WEB上で出来れば良いという方は、選択肢を自由に選んでランダム抽選が行えるツールも用意していますので、こちらもお試しください。

ランダム抽選ツール

以上、jQueryでランダム抽選プログラムの作り方を解説、でした。

jQuery