【JavaScript】ランダム関数

ランダム関数は、予測できない不規則な数値を表示させる関数です。

ランダム関数で乱数を表示する。

ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。

実行例

var num =Math.random();
document.write(num);

結果

結果は0~0.99...の間になります。

乱数を整数にする。

乱数で出力される数字は少数になるので、これを「floor()」で小数点を切り捨てます。

実行例（ソース）

var num =Math.floor(Math.random()*10);
document.write(num);

結果

結果は0~9になります。

乱数をfor文を使って羅列させる。

for文で乱数を処理した分表示させることができます。このときに並ぶ数字ももちろんランダムです。

実行例（ソース）

var max = 10;
var num;
for (var i=0; i < max; i++) {
  num = Math.floor(Math.random() * (max + 1));
  document.write(num + '<br>');
}

結果

結果は1~10（1を加算して0が出ないようにしているので）になります。

乱数を使って画像をランダムで表示させる

表示する画像もランダムで表示させる事ができます。

実行例（ソース）

<h1>今日のイメージ</h1>
<script>
var numofimg = 3;
var num = Math.floor(Math.random() * numOfImg + 1)
document.write('<img src="img/thum_0', num, '.png">');
</body>

結果

thum_01~03.pngのどれかが表示されます。

配列を利用して画像をランダムで表示させる。

配列を利用して、画像をランダムで表示させます。この時配列に「new Array」を使うことで、配列を変数に代入します。

<h1>今日のねこ</h1>
<script>
//配列imagesにイメージファイルのパスを入れておく
var images = new Array(3);
images[0] = 'thum_01.png';
images[1] = 'thum_02.png';
images[2] = 'thum_03.png';

var num = Math.floor(Math.random() * 3);
document.write( '<p><img src="img/' + images[num] + '"></p>' );
</script>

結果

numの乱数を3倍にすることで、結果が0~2までにしかならない。
なので0~2のキーに一致するイメージが表示されます。