js倒计时功能

在学习的过程中做了一个倒计时功能,用到的主要知识点有new Date()函数和setInterval定时器功能,在这里记录一下

 1 <html>
 2     <head>
 3         <style>
 4            h1 {
 5                text-align: center;
 6            }
 7         </style>
 8     </head>
 9 
10 <body>
11     <h1>距离2019双十一还剩<span id="d"></span>天<span id="h"></span>时<span id="m"></span>分<span id="s"></span>秒</h1>
12     <script>
13         //xx天xx时xx分xx秒
14         var endTime = new Date('2019/11/11'); //结束日期
15         //setInterval clearInterval 这些是window提供的方法 
16         //setTimeout clearTimeout
17         var d = document.getElementById('d')
18         var h = document.getElementById('h')
19         var m = document.getElementById('m')
20         var s = document.getElementById('s')
21         setInterval(() => {
22             var now = new Date(); // 现在
23             //转换成秒计算  getTime() 
24             var diff = endTime.getTime() - now.getTime(); //从1970年1月1日到现在的毫秒
25             diff = parseInt(diff / 1000) //换成秒数
26             var days = parseInt(diff / (24 * 3600)) //天数
27             var hours = parseInt(diff % (24 * 3600) / 3600);//小时 多少天数剩下的
28             var minites = parseInt(diff % 3600 / 60) //分 多少小时剩下的
29             var seconds = diff % 60; //多少分钟剩下的
30             var str = '距离2019双十一还剩' + days + '天' + hours + '天' + minites + '分' + seconds + '秒'
31             d.innerHTML = days
32             h.innerHTML = hours
33             m.innerHTML = minites
34             s.innerHTML = seconds
35         }, 1000); //每隔一秒执行函数中的代码  
36 51     </script>
52 </body>
53 
54 </html>
不积跬步无以至千里
原文地址:https://www.cnblogs.com/lyt0207/p/11820866.html