【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のキーに一致するイメージが表示されます。