sample: loto7 simulator
HTML
<div id="loto7"></div>
JavaScript
//一旦配列に全ての数値を格納
var numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37];
//配列内の要素をランダムに並べ替える(関数は後述)
numArr = shuffle(numArr);
//先頭から欲しい数だけ取り出す
var loto7 = numArr.slice(0, 7);
//--------------------
//(ここまでが、重複の無い任意の数の乱数を得る、定番の方法)
//--------------------
//Array.sortで昇順に並べ替え
loto7.sort(function(a, b) {
return a - b;
});
//配列の数字を先頭から順に使い、img要素を生成し挿入
for(var i = 0; i < loto7.length; i++) {
var img = new Image();
img.src = loto7[i] + ".png"; //画像のパス
img.alt = loto7[i]; //alt属性
document.getElementById("loto7").appendChild(img);
}
//配列をランダムに並べ替える関数
//以下のURLから拝借(同様の例が検索すればたくさん出てきます)
//https://hail2u.net/blog/coding/shuffle-array-in-javascript.html
function shuffle(list) {
var i = list.length;
while (--i) {
var j = Math.floor(Math.random() * (i + 1));
if (i == j) continue;
var k = list[i];
list[i] = list[j];
list[j] = k;
}
return list;
}