jQuery

Javascript,jQuery

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

2017/12/06

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

Javascriptで乱数

Math.random()

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

[js]
for (var i=0; i<10; i++) { console.log(Math.random()); } [/js] 結果の一例は以下の様な感じ。 [default] 0.7201108081159188 0.8400530997003633 0.9837428758596342 0.9568856325106788 0.3239662292339288 0.7520360994217516 0.46303849109382667 0.8411066573238926 0.48799327216937505 0.004728576068071755 [/default] 任意の範囲の乱数を取得したい場合は、以下のようにします。 サンプルとして、1~15の範囲で10個、発生させます。 [js] for (var i=0; i<10; i++) { var maxNum = 15; var ret = Math.ceil(Math.random() * maxNum); console.log(ret); } [/js] 結果。 [default] 8 10 15 4 2 3 6 14 8 13 [/default]

Math.ceil()

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

[js]
Math.ceil(0.04222680765458953) ⇒ 1
Math.ceil(14.292958431967962) ⇒ 15
Math.ceil(9.063451149698416) ⇒ 10
[/js]

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

1~31を5個

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

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

[js]
// 作成個数
var count = 5;

// 最大値
var maxNum = 31;

for (var i=1; i重複なし処理

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

[js]
// 作成個数
var count = 5;

// 最大値
var maxNum = 31;

// 生成した乱数を格納する配列を初期化
var genArray = new Array();

// 生成した乱数を格納している配列の長さ(生成した乱数の数)を初期化
var generatedCount = 0;

// count回数 Math.random() で乱数(1~maxNum)を発生
for(var i=0 ; ijquery.textAnimation

デモ

デモはこちらから。

-Javascript,jQuery
-, , , , , ,