こんにちは。ミーハーです。

今回は、JavaScriptでストップウォッチを製作しましたので、紹介します。

目次
製作の目的
- JavaScript学習のため
- 製作実績を作るため
ターゲット
- JavaScriptでできることを知りたい方
- JavaScriptでのクリックイベントのやり方を知りたい方
- webサイトでできることを知りたい方
製作内容
製作者の歴
プログラミング歴:1ヶ月
JavaScript歴:1週間
使用言語
- HTML
- SCSS
- JavaScript
作業時間
3日(約10時間)
難易度
★★☆☆☆☆☆☆☆☆(星2)
ドットインストールを参考に作成し、ほとんど自分で考えていないため星2にしました。
※この難易度の主観は上記プログラミング歴の私です。
コード
HTML
<div class="box">
<div id="timer">00:00.000</div>
<div class="btnmatome">
<div class="btn" id="start">Start</div>
<div class="btn" id="stop">Stop</div>
<div class="btn" id="reset">Reset</div>
</div>
</div>
CSS
.box {
margin: 20px auto;
padding: 15px;
width: 270px;
background: #eef;
text-align: center;
line-height: 40px;
}
#timer {
font-size: 40px;
margin-bottom: 15px;
background: #fff;
height: 120px;
line-height: 120px;
}
.btn {
/* width: 80px; */
width: 30%;
height: 45px;
line-height: 45px;
background: #ddd;
font-weight: bold;
cursor: pointer;
user-select: none;
border-radius:5px;
}
.btn:active{
color:#f00;
}
.btnmatome {
display: flex;
justify-content: space-between;
}
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 stopti = 0;
function countup() {
const d = new Date(Date.now() - startTime + stopti);
const miri = String(d.getMilliseconds()).padStart(3, '0');
const sec = String(d.getSeconds()).padStart(2, '0');
const min = String(d.getMinutes()).padStart(2, '0');
timer.textContent = `${min}:${sec}:${miri}`;
timeoutId = setTimeout(countup, 10);
}
function mukouyuukoustart(){
start.disabled = false;
stop.disabled = true;
reset.disabled = true;
}
function mukouyuukoustop(){
start.disabled = true;
stop.disabled = false;
reset.disabled = true;
}
function mukouyuukoureset(){
start.disabled = false;
stop.disabled = true;
reset.disabled = false;
}
mukouyuukoustart()
start.addEventListener('click', () => {
mukouyuukoustop()
startTime = Date.now();
countup();
});
stop.addEventListener('click', () => {
mukouyuukoureset()
clearTimeout(timeoutId);
stopti += Date.now() - startTime;
});
reset.addEventListener('click', () => {
mukouyuukoustart()
timer.textContent = '00:00.000';
stopti = 0;
});
}

最後に
このサイトを製作したことによって、JavaScriptの関数、時間制御のsetTimeoutを理解することができました。webサイトを作ることが楽しくて、はまってしまいそうです( ´∀` )
どんどんサイトを作っていきたいと思います。
とりあえずコードを一個一個理解するのではなく、コードを多く書いてアウトプットするほうが、プログラミング初心者にはいいかと思いました。