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

ハロートレーニング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>


Mathオブジェクトのメソッド

Math . メソッド名( 数値 );


     


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さいころの目をボタンで変更</title>
<script>
function dice() {
var r = Math.floor(Math.random()*6 + 1);
console.log(r);

document.dimg.src= 'img/d' + r + '.jpg';
}
</script>
</head>
<body>
<p><img src="img/d1.jpg" name="dimg"></p>
<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>
画像名が、整数化した数値で取得できない場合
  • 「one.jpg」「two.jpg」「three.jpg」「four.jpg」「five.jpg」「six.jpg」とした場合を記述しなさい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さいころの目</title>
<script>
var sai = new Array('one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg', 'six.jpg');

function dice() {
var r = Math.floor(Math.random()*sai.length);
console.log(r);

document.dimg.src= 'img/' + sai[r];
console.log(sai[r]);
}
</script>
</head>
<body>
<p><img src="img/d1.jpg" name="dimg"></p>
<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>

偶数の目だけを表示

<script>
for(var i=1; i<=6; i++) {
  if(i % 2 === 0) {
    document.write( '<img src="img/d' + i + '.jpg">' );
  }
}
</script>


《偶数の目だけをすべて表示する》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さいころの目</title>
<style>
body {
  text-align: center;
}
</style>
<script>
var eyesOfDice = new Array('one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg', 'six.jpg');
function dice() {
  for(var i=0; i<eyesOfDice.length; i++) {
    if( i % 2 === 0 ) {
    var str = document.getElementById( 'dice' );
    str.innerHTML += '<img src="img/' + eyesOfDice[i] +'" alt=""> ';
    }
  }
}
</script>
</head>
<body>
<p id="dice"></p>
<p><button onclick="dice()">サイコロを振って奇数の目だけを表示</button></p>
</body>
</html>


奇数の目だけを表示

<script>
for(var i=1; i<=6; i++) {
  if(i % 2 === 1) {
    document.write( '<img src="img/d' + i + '.jpg">' );
  }
}
</script>
広告を非表示にする