この記事では簡易的なタイマー（ストップウォッチ）を作ってみます。
経過時間を取得するDate.now()を使います。
タイマー（ストップウォッチ）を作る
タイマーデモ
スタートをクリックした後、ストップをクリックします。
スタートからストップまでの経過時間を表示します。
サンプルコード
<button onclick="startTimer();">スタート</button>
<button onclick="stopTimer();">ストップ</button>
<button onclick="resetTimer();">リセット</button>
<div>経過時間:<span id="output"></span></div>var start_time;
var stop_time;
var time;
function startTimer() {
start_time = Date.now();
}
function stopTimer() {
stop_time = Date.now();
time = stop_time - start_time;
time = time / 1000;
document.getElementById('output').innerHTML = time + '秒';
}
function resetTimer() {
document.getElementById('output').innerHTML = '';
}Date.now()をstart_time、stop_timeにそれぞれ持っておき、その差分を経過時間として表示します。
Date.now()はミリ秒表記のため、time / 1000で秒表記に変換しています。
以上、タイマー（ストップウォッチ）の作り方でした。
buttonにdisabledを付与して、スタートをクリックしないと、ストップがクリックできないようにするなどの制限を加えるとより使いやすくなります。
