-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
67 lines (62 loc) · 1.97 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
let hr = (min = sec = ms = "0" + 0);
let stTime;
let lapNum = 0;
let start = () => {
stTime = setInterval(() => {
ms++;
ms = ms < 10 ? "0" + ms : ms;
if (ms == 100) {
sec++;
ms = "0" + 0;
sec = sec < 10 ? "0" + sec : sec;
}
if (sec == 60) {
min++;
sec = "0" + 0;
min = min < 10 ? "0" + min : min;
}
if (sec == 60) {
hr++;
min = "0" + 0;
hr = hr < 10 ? "0" + hr : hr;
}
putValues();
}, 10);
document.querySelector(".reset").style.display = "none";
document.querySelector(".start").style.display = "none";
document.querySelector(".stop").style.display = "block";
document.querySelector(".lap").style.display = "block";
};
function putValues() {
document.querySelector(".hr").innerText = hr;
document.querySelector(".sec").innerText = sec;
document.querySelector(".min").innerText = min;
document.querySelector(".ms").innerText = ms;
}
const lap = () => {
if (lapNum == 12) {
alert("Can't add more");
return;
}
document.querySelector(".lap-container").style.display = "flex";
lapNum++;
let lapElement = document.createElement("li");
let laptext = `<span class="lap-num"> Lap ${lapNum}</span>
<span class="lap-timer">${hr}:${min}:${sec}:${ms}</span> `;
lapElement.innerHTML = laptext;
document.querySelector(".lap-container").appendChild(lapElement);
};
const stop = () => {
clearInterval(stTime);
document.querySelector(".reset").style.display = "block";
document.querySelector(".start").style.display = "block";
document.querySelector(".stop").style.display = "none";
document.querySelector(".lap").style.display = "none";
};
const reset = () => {
hr = min = sec = ms = "0" + 0;
document.querySelector(".lap-container").style.display = "none";
document.querySelector(".lap-container").innerHTML = "";
lapNum = 0;
putValues();
};