-
Notifications
You must be signed in to change notification settings - Fork 6
/
vue.js
79 lines (71 loc) · 1.66 KB
/
vue.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
var intervalTimer;
new Vue({
el: '#app',
data: {
selectedTime: 0,
timeLeft: '00:00',
endTime: '0',
times: [
{
sec: 3,
display: '3s'
},
{
sec: 600,
display: ' 10m'
},
{
sec: 1800,
display: '30m'
}
]
},
methods: {
setTime(seconds) {
clearInterval(intervalTimer);
this.timer(seconds);
},
timer(seconds) {
const now = Date.now();
const end = now + seconds * 1000;
this.displayTimeLeft(seconds);
this.selectedTime = seconds;
// this.initialTime = seconds;
this.displayEndTime(end);
this.countdown(end);
},
countdown(end) {
// this.initialTime = this.selectedTime;
intervalTimer = setInterval(() => {
const secondsLeft = Math.round((end - Date.now()) / 1000);
if(secondsLeft === 0) {
this.endTime = 0;
}
if(secondsLeft < 0) {
clearInterval(intervalTimer);
return;
}
this.displayTimeLeft(secondsLeft)
}, 1000);
},
displayTimeLeft(secondsLeft) {
const minutes = Math.floor((secondsLeft % 3600) / 60);
const seconds = secondsLeft % 60;
this.timeLeft = `${zeroPadded(minutes)}:${zeroPadded(seconds)}`;
},
displayEndTime(timestamp) {
const end = new Date(timestamp);
const hour = end.getHours();
const minutes = end.getMinutes();
this.endTime = `${hourConvert(hour)}:${zeroPadded(minutes)}`
},
}
})
function zeroPadded(num) {
// 4 --> 04
return num < 10 ? `0${num}` : num;
}
function hourConvert(hour) {
// 15 --> 3
return (hour % 12) || 12;
}