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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<h1>倒计时</h1>
<span class="day"></span>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
const deadline = new Date("2019-10-1 00:00:00");
const dayElement = document.querySelector(".day");
const hourElement = document.querySelector(".hour");
const minuteElement = document.querySelector(".minute");
const secondElement = document.querySelector(".second");

const countDown = () => {
const timeRemaining = deadline - new Date();
let day, hour, minute, second;
if (timeRemaining < 0) {
return 0;
}
day = Math.floor(timeRemaining / 1000 / 60 / 60 / 24);
hour = Math.floor((timeRemaining / 1000 / 60 / 60) % 24);
minute = Math.floor((timeRemaining / 1000 / 60) % 60);
second = Math.floor((timeRemaining / 1000) % 60);
dayElement.innerHTML = day + "天";
hourElement.innerHTML = hour + "时";
minuteElement.innerHTML = minute + "分";
secondElement.innerHTML = second + "秒";
setTimeout(countDown, 1000);
};

countDown();
</script>
</body>
</html>