js实现仿淘宝抢购倒计时

思路分析：

通过开始时间和结束时间可计算出剩余时间（转化成时间戳，得到时分秒，并精确到毫秒），
放弃使用setinterval有一定的误差， 使用requestAnimationFrame实现匿名函数自执行来达到倒计时的效果

优化：

1. 在结束时使用cancelAnimationFrame取消动画帧
2. 当时分秒为一位数的时候，前面补0，避免出现时间长短不一致的效果，影响视觉。

贴代码

    function formatTime(ms) {
      ms = new Date("2018/8/8 14:20:00").getTime() - Date.now();
      if(ms <= 0){
        document.getElementById("showTime").innerHTML = '已结束'
        window.cancelAnimationFrame(animate);
        return ;
      }
      var ss = 1000;
      var mi = ss * 60;
      var hh = mi * 60;
      var dd = hh * 24;

      var day = parseInt(ms / dd);
      var hour = parseInt((ms - day * dd) / hh);
      var minute = parseInt((ms - day * dd - hour * hh) / mi);
      var second = parseInt((ms - day * dd - hour * hh - minute * mi) / ss);
      var milliSecond = ms - day * dd - hour * hh - minute * mi - second * ss;

      let sb = '';
      if (day >= 0) {
        sb += day + "天"
      }
      if (hour >= 0) {
        /* if(hour >= 0 && hour <= 9){
          sb = sb + '0' + hour + ":"
        }else{
          sb += hour + ":" 
        } */
        sb = hour > 9 ? sb + hour + ":" : sb + '0' + hour + ":"
      }
      if (minute >= 0) {
        sb = minute > 9 ? sb + minute + ":" : sb + '0' + minute + ":"
      }
      if (second >= 0) {
        sb = second > 9 ? sb + second + ":" : sb + '0' + second + ":"
      }
      if (milliSecond >= 0) {
        sb += parseInt(milliSecond / 100)
      }
      document.getElementById("showTime").innerHTML = '距结束' + sb
      animate = window.requestAnimationFrame(formatTime);
    }
    // window.requestAnimationFrame(formatTime)
    var animate;
    formatTime();

定时器的使用参考文章 链接