1,案例分析：
①这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
②三个黑色盒子里面分别存放 时分秒
③ 三个黑色盒子利用 innerHTML 放入计算的 小时分钟秒数
④ 第一次执行也是间隔毫秒数，因此刷新页面会有空白，最后采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。
2,完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin:100px; } span{ display:inline-block; 40px; height:40px; background-color: #333; 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 hour=document.querySelector(".hour"); var minute=document.querySelector(".minute"); var second=document.querySelector(".second"); var inputTime=+new Date('2019-9-8 18:00'); //返回的是用户输入时间总的毫秒数 countDown(); //先调用一次这个函数，防止第一次刷新页面有空白 setInterval(countDown,1000) //开启定时器 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; hour.innerHTML=h; //把剩余的小时给小时盒子 var m=parseInt(times/60%60); m=m<10 ? '0'+m : m; minute.innerHTML=m; //把剩余的分钟给分钟盒子 var s=parseInt(times%60); s=s<10 ? '0'+s : s; second.innerHTML=s; //把剩余的秒数给秒数盒子 } </script> </body> </html>
3,关键代码：
倒计时时间计算
var demo=document.getElementById("demo"); var endTime=new Date("2019/7/19 20:00:00"); //设定截至时间 setInterval(fn,1000); //开启定时器 function fn(){ var nowTime=new Date(); //一定要获取最新时间，放在函数体内 var miao=parseInt((endTime.getTime()-nowTime.getTime())/1000); //用将来的时间毫秒减去现在的时间毫秒再除以1000得到还剩下的秒数，可能除不断要取整 var d=parseInt(miao/3600/24); //得到天数 var h=parseInt(miao/3600%24); //得到小时数 var m=parseInt(miao/60); //得到分钟数 var s=parseInt(miao); //得到秒数 //目的是使时分秒以两位数形式展示 d<10? d="0"+d : d=d; h<10? h="0"+h : h=h; m<10? m="0"+m : m=m; s<10? s="0"+s : s=s; demo.innerHTML="距离抢购还有: "+d+"天"+h+"小时"+m+"分"+s+"秒"; }