#author("2020-02-02T17:41:23+09:00;2019-12-25T13:27:32+09:00","default:inoue.ko","inoue.ko")
*JavaScript|Timer
HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介です。
~
***サンプル [[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_Timer/]]
''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つのボタンを置いて、それぞれにクリックされたときの動作を定義する・・というシンプルなものです。&size(12){外部変数を使っています。他のスクリプトとの併用にはご注意下さい。};
-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つのボタンをそれぞれ、有効にするか無効にするかを決めています。
~
~