Eyecatch jQuery

Javascript,jQuery

jQueryで「ミニロト」番号ジェネレータを作ってみた。

2015/11/18

JavaScript でランダムな文字列なり数値を作成するのってどうするんだ、と思い調査しました。
その時についでに「ミニロト」番号のジェネレータを作ったので、晒してみます。

Javascriptで乱数

Math.random()

Javascriptで乱数を発生させる場合は Math.random() 関数を使います。
引数なしで返り値が 0.0 以上、1.0 未満の乱数を返すという、若干「?」となってしまいがちですが、実例を見ればなんとなく解ると思います。

結果の一例は以下の様な感じ。

任意の範囲の乱数を取得したい場合は、以下のようにします。
サンプルとして、1~15の範囲で10個、発生させます。

結果。

Math.ceil()

Math.ceil() は、小数点以下の値を切り上げした結果を返す関数です。
結果のサンプルは以下のようになります。

ミニロト番号ジェネレータ

1~31を5個

以上を踏まえて、ミニロト用の番号ジェネレータを作ってみます。
ミニロトの仕様は 1~31 の重複なし番号を 5個 です。

まずは、1~31 を 5個ってところから。
先ほどの式をそのまま使えます。

ここまでは何も考えずに作れますね。

重複なし処理

次に、重複なしって処理を加えます。
考え方は『作成した数値が既にある場合は再度作成する』って風にしました。

結果例
配列で返しています。

あとはこれをjQueryを使って表示させれば出来上がり。

なのですが、ちょっと凝ってみます。
数字がうまく昇順で並んでいないので、ソートさせます。

これで、以下のようになります。

仕様はこれで満たせました。
あとはボタンを押した時に実行させ、数字を表示させるだけです。
その辺りは実際のデモをのソースを見て頂ければと思います。

なお、結果数字の表示には jQueryのライブラリである『jquery.textAnimation』を使用させて頂いています。
jquery.textAnimation

デモ

デモはこちらから。

-Javascript,jQuery
-, , , , , ,