NEW

プログラミング
2023.01.30
ITコラム
2018.01.29
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用して、共に START ボタンと STOP ボタンを使用する「ストップウォッチ」と「スロットゲーム」のサンプルを紹介します。
シンプルなストップウォッチを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var tm1; var tm2; // START function start() { tm1 = 0; tm2 = setInterval("disp()", 1000); } // STOP function stop() { clearInterval(tm2); } //経過時間表示 function disp() { //経過秒数を1秒ずつ加算 ++tm1; //時間(経過秒数 / 3600秒) hh = Math.floor(tm1 / 3600); //分(時間の余り / 60秒) mm = Math.floor((tm1 % 3600) / 60); //分(分の10の位と1の位を取得) mm1 = Math.floor(mm / 10); mm2 = mm % 10; //秒(経過秒数 / 60秒の余り) ss = tm1 % 60; //秒(秒の10の位と1の位を取得) ss1 = Math.floor(ss / 10); ss2 = ss % 10; document.getElementById("dat").value = hh + ":" + mm1 + mm2 + ":" + ss1 + ss2; } //--> </script> <div style="background-color : #CCC; padding : 20px;"> <input type="text" id="dat" size="10" value="0:00:00" style="text-align:center;font-size:30px"> <br><br> <div style="display:inline-flex; padding : 0 30%;"> <input type="button" value="START" onClick="start()"> <input type="button" value="STOP" onClick="stop()"> </div> </div>
ストップウォッチがスタートしてから 1秒ずつ経過する時間を表示するための変数( tm1 )と、ストップウォッチをストップさせるために設定する変数( tm2 )を使用します。
スロットゲームを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script language="JavaScript"> <!-- var time1; var time2; var time3; // START function start() { start1(); start2(); start3(); } //各ランダム値を表示 function start1() { document.getElementById("dat1").value = Math.floor(Math.random()*10); time1 = setTimeout(start1, 10); } function start2() { document.getElementById("dat2").value = Math.floor(Math.random()*10); time2 = setTimeout(start2, 10); } function start3() { document.getElementById("dat3").value = Math.floor(Math.random()*10); time3 = setTimeout(start3, 10); } // STOP function stop1() { clearTimeout(time1); } function stop2() { clearTimeout(time2); } function stop3() { clearTimeout(time3); } //--> </script> <style> table, tr, td{ border-style:none; } </style> <div style="background-color : #CCC; padding : 20px;"> <table> <tr><td colspan="3"> <input type="button" value="START" onClick="slot()"> </td></tr> <tr><td> <input type="text" id="dat1" value="0" style="text-align:center;"> <td> <input type="text" id="dat2" value="0" style="text-align:center;"> </td> <td> <input type="text" id="dat3" value="0" style="text-align:center;"> </td></tr> <tr><td> <input type="button" value="STOP" onClick="stop1()"> </td> <td> <input type="button" value="STOP" onClick="stop2()"> </td> <td> <input type="button" value="STOP" onClick="stop3()"> </td></tr> </table> </div>
3個のランダム値を それぞれストップさせるために、3つのタイマー変数( time1、time2、time3 )を設定しています。
プログラミング
2023.01.30
プログラミング
2023.01.24
転職ノウハウ
2023.01.23
転職ノウハウ
2023.01.20
転職ノウハウ
2023.01.16
インタビュー
2023.01.13
INTERNOUS,inc. All rights reserved.