☆HTML☆
ストップウォッチ
ただのストップウォッチだよ。
☆CSS☆
body{
font-family: 'Courier New',monospace;
font-size: 14px;
background: #eee
}
*{
margin: 0;
}
header{
text-align: center;
background-color: rgb(0, 248, 248);
font-weight: bold;
font-size: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
.container{
margin: 20px auto;
width: 270px;
background: #fff;
padding: 15px;
text-align: center;
}
#timer{
background: #ddd;
height: 120px;
line-height: 120px;
font-size: 40px;
margin-bottom: 15px;
}
.btn{
width: 80px;
height: 45px;
line-height: 45px;
background-color: #ddd;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.controls{
display: flex;
justify-content: space-between;
}
.inactive{
opacity: 0.6;
}
p{
padding-left: 35%;
font-size: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
☆JavaScript☆
'use strict';
{
const timer = document.getElementById('timer');
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const reset = document.getElementById('reset');
let startTime;
let timeoutId;
let elapsedTime = 0;//タイマーが走っていた時間
function countUp() {
console.log(Date.now() - startTime);//startTimeはstartボタンを押した時刻と下で定義している。現在の時刻-startを押した時刻でストップウォッチの経過時間を求めている。
const d = new Date(Date.now() - startTime + elapsedTime);//new Dateオブジェクトにコンソールログに表示した値をそのまま渡し、変数dに代入。+elapsedTimeで経過時間も含めてタイマーに表示させている。(startを再びクリックすると0から始まってしまう現象を無くす)
const m = String(d.getMinutes()).padStart(2, '0');//分を求める
const s = String(d.getSeconds()).padStart(2, '0');//秒を求める
const ms = String(d.getMilliseconds()).padStart(3, '0');//ミリ秒を求める
timer.textContent = `${m}:${s}.${ms}`;//timerにtextContentで``内の文字列にしなさいと命令
timeoutId = setTimeout(() => {
countUp();
}, 10);//countUpの処理を一定時間ごとに繰り返したい為、setTimeoutを使用。10ミリ秒後にこの処理が走る為、10ミリ秒ごとに現在時刻とstartTimeの差が表示される。
}//countUpの定義を｛｝内に記載
function setButtonStateInitial() {
start.classList.remove('inactive');
stop.classList.add('inactive');
reset.classList.add('inactive');
}//start前に押せるボタンを制限する関数,true(add)がクリック不可、false(remove)がクリック可
function setButtonStateRunning() {
start.classList.add('inactive');
stop.classList.remove('inactive');
reset.classList.add('inactive');
}//タイマーが動いている時に押せるボタンを制限する関数
function setButtonStateStopped() {
start.classList.remove('inactive');
stop.classList.add('inactive');
reset.classList.remove('inactive');
}//stopボタンを押した時に押せるボタンを制限する関数
setButtonStateInitial();//ページ読み込み時にこの関数を呼び出したい為ここに記載
start.addEventListener('click', () => {
if (start.classList.contains('inactive') === true) {
return;
}//inactiveクラスがついていたら処理を行わないという命令。有効なボタンしか押せないようにしている。
setButtonStateRunning();//タイマー始動時にこの関数を呼び出したい為ここに記載
startTime = Date.now();//基準となる日時からの経過ミリ秒を使用し計算を行う為、Date.now()を使用。Date.nowは現在の時刻を表す。
countUp();
});//startボタンの設定
stop.addEventListener('click', () => {
if (stop.classList.contains('inactive') === true) {
return;
}
setButtonStateStopped();//stopボタンを押した時にこの関数を呼び出したい為ここに記載
clearTimeout(timeoutId);//setTimeoutをキャンセルしたい為、clearTimeoutを使用
elapsedTime += Date.now() - startTime//+=にしてタイマーが走った時間を全て足し上げることで何回stopを押しても次にstartを押したときに直近のstopの時間から始まるようにしている。
});//stopボタンの設定
reset.addEventListener('click', () => {
if (reset.classList.contains('inactive') === true) {
return;
}
setButtonStateInitial();//reset時も最初の状態に戻したい為、ここにもこの関数を記載
timer.textContent = '00:00.000'//timerを元の値に戻すために、このボタンが押されたら''内のテキストに変更するという命令をしている。
elapsedTime = 0;//resetを押したときに経過時間も0にすることで、再びstartを押したときに0から始まるようにしている。一つ上の命令はテキストを設定しているだけ。
});//resetボタンの設定
}