JavaScript

Date.now()でストップウォッチタイマーを作る【JavaScript】

この記事では簡易的なタイマー(ストップウォッチ)を作ってみます。

経過時間を取得する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_timestop_timeにそれぞれ持っておき、その差分を経過時間として表示します。

Date.now()はミリ秒表記のため、time / 1000で秒表記に変換しています。


以上、タイマー(ストップウォッチ)の作り方でした。

buttonにdisabledを付与して、スタートをクリックしないと、ストップがクリックできないようにするなどの制限を加えるとより使いやすくなります。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5