-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (133 loc) · 5.38 KB
/
index.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bộ Đếm Thời Gian Countdown</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<span class="time-input">
<label for="time" class="label-time"> Nhập phút</label>
<input type="text" name="time" id="input-time">
<button class="input-btn" id="start">Start</button>
<button class="input-btn" id="stop">Stop</button>
<button class="input-btn" id="refresh">Refresh</button>
<audio src="./Nhac-bao-thuc-Quan-doi-www_nhacchuongvui_com.mp3"></audio>
</span>
<div class="container">
<h2>
<span>Hãy Cùng Nhau Đếm Ngược </span>
</h2>
<div class="countdown">
<!-- <div id="day"></div> -->
<!-- <div id="hour"></div> -->
<div id="minute"></div>
<div id="second"></div>
</div>
</div>
<!-- <script>
/*Lấy thời gian tết âm lịch (mily giây)*/
var thoigianConLai;
function newYear() {
/*Lấy thời gian ngày hiện tại (mily giây) */
var ngayHienTai = new Date().getTime();
/*Tính thời gian còn lại (mily giây) */
thoigianConLai = tetAmLich - ngayHienTai;
/*Chuyển đơn vị thời gian tương ứng sang mili giây*/
var giay = 1000;
var phut = giay * 60;
var gio = phut * 60;
var ngay = gio * 24;
/*Tìm ra thời gian theo ngày, giờ, phút giây còn lại thông qua cách chia lấy dư(%) và làm tròn số(Math.floor) trong Javascript*/
var d = Math.floor(thoigianConLai / (ngay));
var h = Math.floor((thoigianConLai % (ngay)) / (gio));
var m = Math.floor((thoigianConLai % (gio)) / (phut));
var s = Math.floor((thoigianConLai % (phut)) / (giay));
/*Hiển thị kết quả ra các thẻ Div với ID tương ứng*/
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
return thoigianConLai;
}
/*Thiết Lập hàm sẽ tự động chạy lại sau 1s*/
var setin = setInterval(function () {
newYear();
console.log(thoigianConLai)
if (thoigianConLai <= 0) {
document.querySelector('.countdown').classList.add('close');
clearInterval(setin);
}
}, 1000)
</script> -->
<script>
var timeInput = document.querySelector('input[name="time"]');
var startBtn = document.querySelector('#start');
var stopBtn = document.querySelector('#stop');
var refreshBtn = document.querySelector('#refresh');
var audio = document.querySelector('audio');
document.getElementById("minute").innerText = '00';
document.getElementById("second").innerText = '00';
var interval;
var i = 0;
var secondConlai;
var secondStart;
startBtn.onclick = function () {
if (timeInput.value > 0 ) {
if(i==0){
secondStart = timeInput.value * 60;
}
else{
secondStart = secondConlai;
}
interval = setInterval(function () {
secondStart = secondStart - 1;
secondConlai = countDown(secondStart * 1000);
if (secondStart == 0) {
clearInterval(interval);
setTimeout(function () {
alert('Hết giờ !');
}, 1000)
audio.play();
}
i++;
}, 1000)
} else {
alert('Hay nhap so phut!')
}
}
stopBtn.onclick = function () {
clearInterval(interval);
audio.pause();
}
refreshBtn.onclick = function() {
clearInterval(interval);
document.getElementById("minute").innerText = '00';
document.getElementById("second").innerText = '00';
timeInput.value = '';
audio.pause();
i=0;
}
function countDown(secondTongMl) {
var secondTong = Math.floor(secondTongMl / 1000);
var minute = 0;
var second = 0;
if (secondTong % 60 === 0) {
minute = secondTong / 60;
second = 0;
} else {
minute = Math.floor(secondTong / 60);
second = secondTong % 60;
}
minute < 10 ? document.getElementById("minute").innerText = '0' + minute : document.getElementById("minute")
.innerText = minute;
second < 10 ? document.getElementById("second").innerText = '0' + second : document.getElementById("second")
.innerText = second;
return minute*60+second;
}
</script>
</body>
</html>