【7：Bomb】ランダムでボタンアクションを切り替える
プロジェクトNo.7：Bomb
JavaScriptのランダム関数を使用して、複数用意したボタンの中から、毎回異なる1つのボタンだけ違うアクションをするというものを作成した。
今回のポイントは以下の通り。
- 警告ウィンドウの表示｜alert()
- 乱数の作成｜Math.random()
- 文字列から整数に変換｜parseInt()
- ボタンを押して画像を変更｜document.bomb.src
ソースコード
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ProgressBar</title> <link rel="stylesheet" href="style.css"> </head> <body onload="hideProg()"> <div id="main"> <div id="progBase"></div> <div id="prog"></div> </div> <img src="./images/morning.jpg" onload="ShowProg()"> <img src="./images/noon.jpg" onload="ShowProg()"> <img src="./images/evening.jpg" onload="ShowProg()"> <img src="./images/night.jpg" onload="ShowProg()"> <script type="text/javascript"> maxNum = 4; cnt = 0; wSize = 400; function hideProg(){ document.getElementById("progBase").style.visibility = "hidden"; document.getElementById("prog").style.visibility = "hidden"; } function ShowProg(){ cnt++; barWidth = Math.floor((cnt / maxNum) * wSize); document.getElementById("prog").style.width = barWidth + "px"; } </script> </body> </html>
乱数の作成｜Math.random()
今回は0～4までの乱数を作成します。
まず、Math.random()で0.0以上1.0未満までのランダムな浮動小数点を発生させる事ができます。
これに作成したい範囲の数（ここでは0～4なので5）を掛けて、
Math.floor関数を使って端数を切り捨てます。
Javascript
//0～4までの乱数を発生させる var randnum = Math.floor( Math.random() * 5 );
文字列から整数に変換｜parseInt()
引数で渡ってきた値は文字列として扱われるので、乱数で生成された整数と比較するためには、文字列を整数に変換する必要があります。
文字列を整数に変換するにはparseInt()関数を使用します。
Javascript
//引数を数字に変換 var n = parseInt(num);
ボタンを押して画像を変更｜document.bomb.src
前回説明した、DOMの応用です。
document.bomb.srcという様に、imgタグのsrcの内容を変更する事ができます。
Javascript
document.bomb.src = "./imgs/bob.jpeg";
素材
今回、使用させてもらったフリー素材は以下のとおり。
