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;
}
JavaScript入門