【javascript】Date.now()を使って、ストップウォッチをつくる

Date.now() を使う
Date.now()メソッドに関しては以下を参照

ストップ時点 - スタート時点 =経過時間
でもこれでは毎回スタートボタンを押すたびに 0 になってしまう。
再度スタートボタンを押して再開させるためには、前回の経過時間をプラスしなければならない。
過去の記録を継続する
ストップ(n回目) - スタート(n回目) =経過時間 + 過去の経過時間
コードの紹介
HTML
<div class="timeCount">00:00:000</div>
<div>
<button class="start" onclick="startTimer()">Start</button>
<button class="stop" onclick="stopTimer()" disabled>Stop</button>
<button class="reset" onclick="resetTimer()" disabled>Reset</button>
</div>
javascript
const timeCount = document.querySelector(".timeCount");
const startBtn = document.querySelector(".start");
const stopBtn = document.querySelector(".stop");
const resetBtn = document.querySelector(".reset");
//クリックされた時の時間(マイクロ秒)
var startTime;
//経過時刻(マイクロ秒)この値が秒、分として表示される
var elapsedTime = 0;
// setinterval を止めるための変数。clearTimeoutの引数へ
var timerId;
//過去の経過時間を記録するための変数。
var timeToadd = 0;
function updateTimeText() {
//1分は60000マイクロ秒。60000で割ることにより、分が計算される。
var m = Math.floor(elapsedTime / 60000);
//1分は60000マイクロ秒。60000ミリ秒で割り、その余りを1000で割れば秒が計算される。
var s = Math.floor((elapsedTime % 60000) / 1000);
//1秒は1000マイクロ秒。 1000ミリ秒で割った数の余りがマイクロ秒
var ms = elapsedTime % 1000;
m = ("0" + m).slice(-2);//文字列の末尾2桁を表示
s = ("0" + s).slice(-2);//文字列の末尾2桁を表示
ms = ("00" + ms).slice(-3);//文字列の末尾3桁を表示
//HTMLのid="timer"部分に表示させる
timeCount.textContent = m + ":" + s + ":" + ms;
}
//何度も使うための関数
function countUp() {
// clearIntervalでストップさせるための変数
timerId = setTimeout(function () {
//経過時刻はストップした時刻からスタートした時刻を引く
//2回目以降はtimeToaddが追加される
elapsedTime = Date.now() - startTime + timeToadd;
updateTimeText();
//countUp関数自身を呼びだし10ミリ秒毎に計算をする
countUp();
//10ミリ秒ごとに計算が繰り返される
}, 10);
}
function startTimer() {
startTime = Date.now();
countUp();
//スタートボタンを押せなくする
startBtn.setAttribute("disabled", true);
//ストップボタンとリセットボタンを押せるようにする
stopBtn.removeAttribute("disabled");
resetBtn.removeAttribute("disabled");
}
function stopTimer() {
//タイマーをストップさせる
clearInterval(timerId);
//過去の経過時間。2回目以降この値が加算される。
timeToadd += Date.now() - startTime;
//ストップボタンを押せないようにする
stopBtn.setAttribute("disabled", true);
//スタートボタンを押せるようにする
startBtn.removeAttribute("disabled");
}
function resetTimer() {
//タイマーをストップさせる
clearInterval(timerId);
//経過時刻を0に
elapsedTime = 0;
//過去の経過時刻を0に
timeToadd = 0;
//表示を0にする
updateTimeText();
//スタートボタンを押せるようにする
startBtn.removeAttribute("disabled");
//ストップボタンとリセットボタンを押せないようにする
stopBtn.setAttribute("disabled", true);
resetBtn.setAttribute("disabled", true);
}
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク