倒计时

倒计时JS部分

********************************************************************************

2019/12/27更新

// 计时器代码整理
//思路：计算当前最新时间和目标时间的时间差  计算当前时间差中包含的时分秒
var timebox = document.getElementById('time');
var targetTime = new Date("2019/12/28 15:54:00");
function addZero(num){
    return num<10?0+'num':num
}
function count(){
    var difTime=targetTime-new Data()
    if(difTime<=0){
        clearInterval(a);
        return
    }
    var  hours = Math.floor(diffTime/(1000*60*60));
    var minutes = Math.floor((diffTime-hours*1000*60*60)/(1000*60));
    var seconds = Math.floor((diffTime-hours*1000*60*60-minutes*1000*60)/1000);
    timebox.innerHTML = addZero(hours)+":" + addZero(minutes) + ":"+ addZero(seconds);
}
count();
var  a = setInterval(count,1000);

*******************************************************************************

<script type="text/javascript">
     //getTime 获取距离1970年1月1日午夜00:00:00之间的毫秒差
      var oDiv=document.getElementById("div1");
      var str=getSpanTime();
      oDiv.innerHTML="秒杀倒计时"+str;
     //定时器 每秒钟自动执行包含的函数
      var timer=window.setInterval(function(){
          var str=getSpanTime();
          oDiv.innerHTML="秒杀倒计时"+str;
      },1000);
      function getSpanTime(){
          // 把本机时间变成标准时间格式的形式
          var tarTime=new Date("2016/06/28 00:00:00");
          //获取时间，一般不能用本机时间来作为秒杀啊等重大活动的时间 本例子只是用来编写倒计时的过程
          var nowTime=new Date();
          //获取目标时间距离1970年的时间差
          var tarSpan=tarTime.getTime();
          //获取当前时间距离1970年的时间差
          var nowSpan=nowTime.getTime();
          //目标时间与当前时间差
          var diffTime=tarSpan-nowSpan;
          //获取小时数
          var hour=Math.floor(diffTime/(1000*60*60));
          var hourMs=hour*60*60*1000;
          var spanMs=diffTime-hourMs;
          //获取分钟数
          var minute=Math.floor(spanMs/(1000*60));
          var minuteMs=minute*60*1000;
          var spanMs1=spanMs-minuteMs;
          //获取秒数
          var second=Math.floor(spanMs1/1000);
          return zero(hour)+":"+zero(minute)+":"+zero(second);
      }
     //小于10的数补零
    function zero(value){
        return value<10? "0"+value:value;
    }
</script>

倒计时CSS部分

  body,div{
        margin: 0px;
        padding: 0px;
    }
    #div1{
         800px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 10px auto;
        border: 1px solid coral;
        background: -webkit-linear-gradient(top left,#2eafbb,greenyellow,sandybrown);
        font-size:20px;
        font-family: "微软雅黑";
    }
</style>