js编写倒计时-距离开始时间距离结束时间-结束

前言

经过10.1 急急忙忙的上线国庆专题，导致当时没有写一套自动切换时间的，所以让小同事在凌晨的时候替换页面完成，所以节后为了方便以后使用，编写了一套倒计时的小例子， 希望以后在有相似的时候，可以用上。

这个效果主要是利用js 完成 距离活动还有多长时间开始， 距离多长时间 结束，还有活动结束的时候停止。

<div>
    <p>
    <span id="timeTit"></span>  <span id="_d"></span><span id="_h"></span><span id="_m"></span><span id="_s"></span>
    </p>
  </div>

  <script type="text/javascript">

    //设置开始时间
    var begDate = new Date("2018-10-12 13:52:00");
    //设置结束时间
    var endDate = new Date("2018-10-12 13:53:00");
    var end = endDate.getTime(); // 结束秒数
    var beg = begDate.getTime(); // 开始秒数

    function countTime() {
      //获取当前时间
      var date = new Date();
      // 当前时间秒数
      var now = date.getTime();
      //时间差
      var leftTime = end - now; // 结束秒数 - 现在秒数
      var begTime = beg - now;  // 开始秒数 - 现在秒数
      //定义变量 d,h,m,s保存倒计时的时间
      var d, h, m, s;
      var timeTit = document.getElementById('timeTit'); // 时间前文档
      if(begTime>=0){ //  如果开始时间大于等于0 的时候 执行
        timeTit.innerHTML = '距离活动开始'
        d = Math.floor(begTime / 1000 / 60 / 60 / 24);
        h = Math.floor(begTime / 1000 / 60 / 60 % 24);
        m = Math.floor(begTime / 1000 / 60 % 60);
        s = Math.floor(begTime / 1000 % 60);

        document.getElementById("_d").innerHTML = d + "天";
        document.getElementById("_h").innerHTML = h + "时";
        document.getElementById("_m").innerHTML = m + "分";
        document.getElementById("_s").innerHTML = s + "秒";
      }else if (leftTime >= 0) { // 当结束时间大于等于0 的时候执行这里
        timeTit.innerHTML = '距离活动结束'
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        //将倒计时赋值到div中
        document.getElementById("_d").innerHTML = d + "天";
        document.getElementById("_h").innerHTML = h + "时";
        document.getElementById("_m").innerHTML = m + "分";
        document.getElementById("_s").innerHTML = s + "秒";
        //递归每秒调用countTime方法，显示动态时间效果

      } else {  // 结束的时候执行这里
        timeTit.innerHTML = '活动已经结束';
        document.getElementById("_d").innerHTML = 0 + "天";
        document.getElementById("_h").innerHTML = 0 + "时";
        document.getElementById("_m").innerHTML = 0 + "分";
        document.getElementById("_s").innerHTML = 0 + "秒";
        clearTimeout(countTime); //  结束的时候清除定时器
        return;  // 并停止这个函数
      }
      setTimeout(countTime, 1000); // 每一秒执行一次这个函数
    }
    countTime(); // 执行函数
  </script>


复制代码

也许麻烦点，希望伙伴们指导，也希望帮助新入手的伙伴们。

这是过来人的一点经验。

转载于:https://juejin.im/post/5bc038915188255c352d8093