-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
80 lines (68 loc) · 2.15 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
68
69
70
71
72
73
74
75
76
77
78
79
const timeDisplay = document.querySelector("#timeDisplay");
const startBtn = document.querySelector("#startBtn");
const stopBtn = document.querySelector("#stopBtn");
const resetBtn = document.querySelector("#resetBtn");
let startTime = 0;
let elapsedTime = 0;
let isStopped = 1;
let isReset = 1;
let intervalId;
let hrs = 0;
let mins = 0;
let secs = 0;
let centisecs = 0;
startBtn.addEventListener("click", () => {
let case1State = 0;
let case2State = 0;
if (isStopped === 1){
//button is clicked. Present state is: Timer is stopped. (need to start or resume timing. change button text to 'stop')
case1State = 1;
}
if (isStopped === 0){
//button is clicked. Present state is: Timer is running. Timer is not reset. (need to stop timing. change button text to 'resume')
case2State = 1;
}
if (case1State === 1){
isStopped = 0;
isReset = 0;
startBtn.innerText = "Stop";
startBtn.style.backgroundColor = "red";
startTime = Date.now() - elapsedTime;
intervalId = setInterval(updateTime, 10);
}
if (case2State === 1){
isStopped = 1;
startBtn.innerText = "Resume";
startBtn.style.backgroundColor = "#0000FF";
clearInterval(intervalId);
}
});
resetBtn.addEventListener("click", () => {
isStopped = 1;
isReset = 1;
clearInterval(intervalId);
startTime = 0;
elapsedTime = 0;
hrs = 0;
mins = 0;
secs = 0;
timeDisplay.textContent = "00:00:00";
startBtn.innerText = "Start";
startBtn.style.backgroundColor = "#0000FF";
});
function updateTime(){
elapsedTime = Date.now() - startTime;
centisecs = Math.floor((elapsedTime / 10) % 100);
secs = Math.floor((elapsedTime / 1000) % 60);
mins = Math.floor((elapsedTime / (1000 * 60)) % 60);
hrs = Math.floor((elapsedTime / (1000 * 60 * 60)) % 60);
centisecs = pad(centisecs);
secs = pad(secs);
mins = pad(mins);
hrs = pad(hrs);
//timeDisplay.textContent = `${hrs}:${mins}:${secs}`;
timeDisplay.textContent = `${mins}:${secs}:${centisecs}`;
function pad(unit){
return (("0") + unit).length > 2 ? unit : "0" + unit;
}
}