初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript randomメソッド

先日記述したrandomメソッドを使用して ランダムな整数を生成する方法を記述します。 randomメソッドを使うと0~1の間の乱数を取得できます。

  • 「random()」は、「0以上1未満の乱数を生成する」メソッド
  • 「floor()」は、「小数点以下を切り捨てる」メソッド

これを利用すると下記の記述でランダムな整数を生成することができます。

rnd = Math.floor(Math.random() * (MAX + 1));

下記の記述で10のランダムな整数が生成されます。

<script>
var MAX = 10;
var num;
for (var i=0; i < 10; i++) {
num = Math.floor(Math.random() * (MAX + 1));
document.write(num, "<br>");
}
</script>

応用すると画像をランダムに表示することも可能です。
写真が4枚あり、名前が同一でそれぞれ数字だけが順になってる場合に その数字をrandomメソッドとfloorメソッドを使ってランダムな整数を 取得し、毎回写真を変える記述になります。

<script>
numOfImg = 4;
var num;
num = Math.floor(Math.random() * numOfImg)
document.write('<img src="img/img', num, '.jpg">');
</script>

topへ戻る