用javascript实现倒计时效果

た入场券 2022-10-29 07:51 224阅读 0赞

用Javascript实现倒计时效果，供大家参考，具体内容如下

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

在某些商城网站中，我们常常可以看见其网站或者app上有一个区域放的是倒计时，来用来提醒用户还有多少时间将会发生什么事情，下面我们用代码来对其进行实现

代码如下：

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  
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
<style>  
div \{  
margin: 300px;  
border: 1px solid pink;  
\}  
  
span \{  
display: inline-block;  
width: 40px;  
height: 40px;  
background-color: blue;  
font-size: 20px;  
color: \#fff;  
text-align: center;  
line-height: 40px;  
\}  
</style>  
</head>  
<body>  
<div>  
<span class="hour">1</span>  
<span class="minute">2</span>  
<span class="second">3</span>  
</div>  
<script>  
var hours=document.querySelector('.hour')  
var min=document.querySelector('.minute')  
var sce=document.querySelector('.second')  
var inputTime=+new Date('2021-2-8 16:40:00')  
//countDown()//先1调用，防止第一次刷新有空白  
//开启定时器,这是等了1000ms后才开启的定时器  
setInterval(countDown,1)  
function countDown() \{  
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数  
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数  
var h = parseInt(times / 60 / 60 % 24); //时  
h = h < 10 ? '0' + h : h;  
hours.innerHTML = h; // 把剩余的小时给 小时黑色盒子  
var m = parseInt(times / 60 % 60); // 分  
m = m < 10 ? '0' + m : m;  
min.innerHTML = m;  
var s = parseInt(times % 60); // 当前的秒  
s = s < 10 ? '0' + s : s;  
sce.innerHTML = s;  
\}  
</script>  
</body>  
</html>