-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
88 lines (72 loc) · 2.06 KB
/
app.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
80
81
82
83
84
85
86
87
88
const displayHours = document.querySelector('#hours')
const displayMins = document.querySelector('#minutes')
const displaySeconds = document.querySelector('#seconds')
const displayMs = document.querySelector('#ms')
const btnStart = document.querySelector('#start')
const btnPause = document.querySelector('#pause')
const btnRestart = document.querySelector('#restart')
var hours = 0
var mins = 0
var seconds = 0
var ms = 0
btnStart.addEventListener('click', () => {
changeTimer('start')
})
btnPause.addEventListener('click', () => {
changeTimer('pause')
})
btnRestart.addEventListener('click', () => [
changeTimer('restart')
])
var timerLoop
var timerActive = false
function changeTimer(state) {
if (state == 'start') {
if (timerActive == false) {
timerLoop = setInterval(updateTimer, 10)
timerActive = true
}
}
if (state == 'pause') {
clearInterval(timerLoop)
timerActive = false
}
if (state == 'restart') {
restartTimer()
}
function restartTimer() {
clearInterval(timerLoop)
ms = 0
seconds = 0
mins = 0
hours = 0
timerActive = false
updateTimer()
}
function updateTimer() {
if (ms > 99) {
ms = 0
seconds++
}
if (seconds > 59) {
seconds = 0
mins++
}
if (mins > 59) {
mins = 0
hours++
}
if (hours > 99) {
restartTimer()
}
displayHours.textContent = hours
displayMins.textContent = (mins < 10) ? '0'+mins : mins
displaySeconds.textContent = (seconds < 10) ? '0'+seconds : seconds
displayMs.textContent = (ms < 10) ? '0'+ms : ms
ms++
}
}
// Animation
gsap.from('.heading', {opacity: 0, y: -50, duration: 1, delay: .3, ease: 'power4'})
gsap.from('.watch__item', {y: -50, opacity: 0, duration: .5, stagger: .15, delay: .5})
gsap.from('.controls__item',{y: 50, opacity: 0, duration: .5, stagger: .15, delay: 1} )