-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
79 lines (72 loc) · 1.93 KB
/
script.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 minute = document.querySelector('#min');
const sec = document.querySelector('#sec');
const millisec = document.querySelector('#millisec');
const start = document.querySelector('#btn-start');
const lap = document.querySelector('#btn-lap');
const stop = document.querySelector('#btn-stop');
const reset = document.querySelector('#btn-reset');
const list = document.querySelector('#lap-list');
let ms = 0;
let s = 0;
let min = 0;
let id = 1;
let interval;
let stopTime = true
function startTime(){
ms ++;
millisec.innerHTML = ms.toString().padStart(2,0) || ms;
if(ms >= 99 ) {
ms = 0;
s++;
}
sec.innerHTML = s.toString().padStart(2,0) || s
if(s > 59) {
s = 0;
min++;
}
minute.innerHTML = min.toString().padStart(2,0) || min
// console.log(typeof millisec.innerHTML)
}
function getTime(){
let ms = millisec.innerHTML;
let s = sec.innerHTML;
let min = minute.innerHTML;
return `${min}:${s}:${ms}`
}
start.addEventListener('click', () => {
if(stopTime) {
interval = setInterval(startTime,10);
stopTime = false;
}
});
lap.addEventListener('click',function(){
if(getTime() !== '00:00:00'){
list.classList.remove('hidden');
const lap = document.createElement('div');
const timeNow = document.createElement('p');
const lapId = document.createElement('p');
list.appendChild(lap);
lap.append(lapId, timeNow);
lapId.innerHTML= `#${id}`;
timeNow.innerHTML= ` ${getTime()}`;
lap.setAttribute('id',`lap`);
id++
}
})
stop.addEventListener('click',function(){
clearInterval(interval);
stopTime = true;
})
reset.addEventListener('click', function(){
clearInterval(interval);
stopTime = true;
ms = 0;
s = 0;
min = 0;
id = 1 ;
millisec.innerHTML = '00';
sec.innerHTML = '00';
minute.innerHTML = '00';
list.innerHTML = `<h2>Laps</h2>`;
list.classList.add('hidden');
})