倒计时效果
案例分析：
1.这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）；
2.三个黑色盒子分别存放时分秒；
3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数；
4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白；
5.最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。
效果展示：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{ 8 margin: 200px; 9 } 10 span{ 11 display: inline-block; 12 width: 40px; 13 height: 40px; 14 background-color: black; 15 font-size: 20px; 16 color: white; 17 text-align: center; 18 line-height: 40px; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <span class="hour">1</span> 25 <span class="minute">2</span> 26 <span class="second">3</span> 27 </div> 28 <script> 29 //1.获取元素 30 var hour = document.querySelector('.hour'); 31 var minute = document.querySelector('.minute'); 32 var second = document.querySelector('.second'); 33 var inputTime = +new Date('2020-5-20 24:00:00'); //返回的是用户输入时间总的毫秒数 34 countDown(); //先调用一次函数，防止第一次刷新页面有空白 35 //2.开启定时器 36 setInterval(countDown, 1000); 37 38 function countDown(){ 39 var nowTime = +new Date(); //返回的是当前时间总的毫秒数 40 var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数 41 // var d = parseInt(times / 60 / 60 / 24); //天 42 // d = d < 10 ? '0' + d : d; 43 var h = parseInt(times / 60 / 60 % 24); //时 44 h = h < 10 ? '0' + h : h; 45 hour.innerHTML = h; 46 var m = parseInt(times / 60 % 60); //分 47 m = m < 10 ? '0' + m : m; 48 minute.innerHTML = m; 49 var s = parseInt(times % 60); //当前的秒 50 s = s < 10 ? '0' + s : s; 51 second.innerHTML = s; 52 } 53 </script> 54 </body> 55 </html>
