今回作ったストップウォッチ
(手元で実験すると別のタブを開いたらその間は計測されず、戻った時に再開する)
ストップウォッチを作る実験(分と秒)
に「時」と「ミリ秒」も計測できるようにしてみる
(hour と milsec の処理を追加しただけ)
「ミリ秒」は2桁で表示しています
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <body> <input type="text" id="tb" value="00:00:00:00"> <button id='start_bt'>start</button> <button id='stop_bt'>stop</button> <button id='reset_bt'>reset</button> <script> /************************************ グローバル ************************************/ var milsec = 0; var sec = 0; var min = 0; var hour = 0; var timeOutId; var ticking = false; /************************************ イベント ************************************/ elem('start_bt').onclick = start; elem('stop_bt').onclick = stop; elem('reset_bt').onclick = reset; /************************************ document.getElementById(id)でidの要素を返す ************************************/ function elem(id) { return document.getElementById(id); } /************************************ start ************************************/ function start() { if(ticking === true) { //動いているときは何もしない } else {//止まっていたら動かす ticking = true; setTimeout(timeout, 10);//一秒後に実行する } } /************************************ stop ************************************/ function stop() { ticking = false; clearTimeout(timeOutId); } /************************************ reset ************************************/ function reset() { ticking = false; clearTimeout(timeOutId); elem('tb').value = '00:00:00:00'; milsec = 0; sec = 0; min = 0; hour = 0; } /************************************ timeout ************************************/ function timeout() { calcTime(); timeOutId = setTimeout(timeout, 10); } /************************************ calcTime ************************************/ function calcTime() { milsec++; if (milsec === 100) { milsec = 0; sec++; } if (sec === 60) { sec = 0; min++; } if (min === 60) { min = 0; hour++; } var time = add0(hour, min, sec, milsec); elem('tb').value = time.join(':'); } /************************************ 一桁の場合は頭に0をつけて二桁表示にする ************************************/ function add0(hour, min, sec, milsec) { if (hour < 10) { hour = '0' + hour; } if (min < 10) { min = '0' + min; } if (sec < 10) { sec = '0' + sec; } if (milsec < 10) { milsec = '0' + milsec; } var time = [hour, min, sec, milsec]; return time; } </script> </body> </html> |