JavaScript|Timer
HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介です。
サンプル → DEMO
index.html | ページの文書構造
<!DOCTYPE html> <html lang ="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="sample.js"></script> <title>STOPWATCH</title> </head> <body> <div id="time">0.00</div> <button id="start">START</button> <button id="stop">STOP</button> <button id="reset">RESET</button> </body> </html>
style.css | ページのビジュアル
body{ text-align: center; } #time{ font-size: 72px; }
sample.js | ページのふるまい
var timerId, startTime, elapsedTime = 0; var startBtn, stopBtn, resetBtn, timeDisplay; window.onload = function(){ startBtn = document.getElementById('start'); stopBtn = document.getElementById('stop'); resetBtn = document.getElementById('reset'); timeDisplay = document.getElementById('time'); startBtn.addEventListener("click",startTimer); stopBtn.addEventListener("click",stopTimer); resetBtn.addEventListener("click",resetTimer); setBtnState(true,false,false); } function startTimer() { setBtnState(false,true,false); startTime = Date.now(); timerId = setInterval(update,10); } function update(){ var t = Date.now() - startTime + elapsedTime; timeDisplay.innerHTML = (t/1000).toFixed(2); } function stopTimer(){ setBtnState(true,false,true); elapsedTime = Date.now() - startTime + elapsedTime; clearInterval(timerId); } function resetTimer() { setBtnState(true,false,false); timeDisplay.innerHTML = '0.00'; elapsedTime = 0; } function setBtnState(start,stop,reset){ startBtn.disabled = !start; stopBtn.disabled = !stop; resetBtn.disabled = !reset; }
3つのボタンを置いて、それぞれにクリックされたときの動作を定義する・・というシンプルなものです。外部変数を使っています。他のスクリプトとの併用にはご注意下さい。
- Date.now()で現在時刻と経過時間を取得
現在時刻は Date.now()という関数で、UTC(協定世界時)での 1970 年 1 月 1 日 00 時 00 分 00 秒 から現在までの経過ミリ秒が与えられます。
タイマーの表示 = 現在時刻 - startBtnが押された時刻 が基本です。
このサンプルでは、一旦ストップした後も続けて計測できるよう、経過時間を累積するようにしているので、
タイマーの表示 = 現在時刻 - startBtnが押された時刻 + 累積経過時間
で計算しています。
- setInterval 関数による表示の更新
動きは、setInterval 関数で、10ミリ秒ごとに表示を更新するルーチンを呼び出すことで実現しています。timerID = window.setInterval( function, delay ); function : delay ミリ秒後に実行したい関数。 delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
- clearInterval 関数による更新の停止
この関数で、setInterval による呼び出しをストップしています。
タイマーは複数使えるので、 timerIDでそれらを識別管理します。この場合はsetInterval を設定したときのIDを持つタイマーをストップしています。
- toFixedメソッドによる小数点以下の桁数指定
例えば、対象の数値が 1234.543
toFixed(0) > 1235
toFixed(1) > 1234.5
toFixed(2) > 1234.54 ・・・となります。
- startBtn.disabled = !start;
これは、わかりにくい書き方ですが、
start が trueの場合、disabled(無効)が !true = false。 つまりボタンは有効
start が falseの場合、disabledが !false = true。 つまりボタンは無効
ということで、状況に応じて、3つのボタンをそれぞれ、有効にするか無効にするかを決めています。