JavaScript: タイマーで経過秒数を取得する
タイマー機能を使って経過秒数を取得し、表示してみます。
動作は次の通りです。
- スタートボタンを押すと、1秒おきに経過秒数が表示されます。
- ストップボタンを押すと、タイマーがストップします。
- 再度スタートボタンを押すと、0から経過秒数を表示します。
経過秒数:
解説
ポイントは下のJavaScriptのコード内の次の部分です。
経過秒数 = Math.floor((現在時刻 - 開始時刻) / 1000)
現在時刻から開始時刻をマイナスし、1000で割ると経過秒数が取得できます。 ただし、このままだと小数点以下も表示されますのでMath.floor()で小数点部分を切り捨てます。
HTML
<p><button id="start">Start</button>
<button id="stop">Stop</button></p>
<div id="result" style="font-size: 1.2em;font-weight: bold;">経過秒数: </div>
JavaScript
var timer1; var startTime, nowTime; var btnStart = document.getElementById('start'); var btnStop = document.getElementById('stop'); // start btnStart.addEventListener('click', function(){ var re = document.getElementById('result'); re.innerHTML = '経過秒数: 0秒'; // スタート時刻 startTime = new Date(); // タイマー開始 startTimer(); btnStart.disabled = true; }); // stop btnStop.addEventListener('click', function(){ stopTimer(); btnStart.disabled = false; }); // タイマー開始 function startTimer(){ timer1 = setInterval(showSecond, 1000); } // タイマー終了 function stopTimer(){ clearInterval(timer1); } // 秒数表示 function showSecond(){ nowTime = new Date(); var elapsedTime = Math.floor((nowTime - startTime) / 1000); var str = '経過秒数: ' + elapsedTime + '秒'; var re = document.getElementById('result'); re.innerHTML = str; }