読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

random関数

乱数の発生

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


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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>乱数の発生</title>
</head>
<body>
<h1>乱数の発生</h1>
<script>
MAX = 10;
var num;
for (var i=0; i < 10; i++) {
  num = Math.floor(Math.random() * MAX + 1);
  document.write(num, "<br>");
}
</script>
</body>
</html>

画像のランダム表示

  • 「img0〜img4」画像を準備する
  • 「img1〜」の場合は、((Math.random()*numOfImg)+1)となる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イメージをランダムに表示する</title>
<style>
body {;
	text-align: center;
}
</style>
</head>
<body>
<h1>今日のイメージ</h1>
<script>
numOfImg = 4;
var num;
num = Math.floor(Math.random() * numOfImg)
document.write('<img src="img/img', num, '.jpg">');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
<style>
body {
	background: url(img/omikuji.gif) ;
}
</style>
</head>
<body>
<h1>あなたの今日の運勢</h1>
<script>
//配列imagesにイメージファイルのパスを入れておく
var images = new Array(4);
images[0] = "0.jpg";
images[1] = "1.jpg";
images[2] = "2.jpg";
images[3] = "3.jpg";

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