倒计时效果

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+"秒";
            }