webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Math.randomの使い方

JavaScriptで乱数を取得したい場合には「random関数」を使います。

覚えるメソッド

Math.random

Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。



Math.round

Math.round()は、小数点以下を四捨五入するメソッドです。整数を取得したい場合に利用します。

Math.ceil

Math.ceil()は、小数点以下を切り上げるメソッドです。0.999なら1、3.21なら4という数値を返します。

Math.floor

Math.floor()は、小数点以下を切り下げるメソッドです。0.999なら0、3.21なら3という数値を返します。


<script>
  let a =  Math.random();
 
  document.write(a);
</script>

0から9までの数字をランダムで取得したい場合

<script>
// 0〜9の乱数を発生 ([10]を指定する)
let a = Math.floor( Math.random() * 10 ) ;

 document.write(a);
</script>

各メソッドを実際に表示させる

<script>
 
  let a = Math.round( Math.random() * 10);  //小数点以下を四捨五入
  let b = Math.ceil( Math.random() * 10);  //小数点以下を切り上げ
  let c = Math.floor( Math.random() * 10);  //小数点以下を切り捨て

  document.write(a + '<br>');
  document.write(b + '<br>');
  document.write(c + '<br>');
</script>

任意の範囲での乱数を取得するには

<script>
// 5〜10の乱数を発生 [11-5]と[5]を指定する
let a = Math.floor( Math.random() * 6 ) + 5 ;
</script>

画像をランダムで表示する

//配列omikujiに画像を登録する
let omikuji = new Array(4);

omikuji[0] = "kuji_0.png";
omikuji[1] = "kuji_1.png";
omikuji[2] = "kuji_2.png";
omikuji[3] = "kuji_4.png";

//0~3までの値をランダムで取得する
num = Math.floor(Math.random() * 4);

document.write('<img src="img/' + omikuji[num] + '">');