动态倒计时（仿vantUI倒计时）

先看下效果图（动态的，懒得做动图，就截个图大概看下）：

这个效果其实vantUI上有个相似的，vantUI倒计时。我的项目其实引入了vantUI，但是没用这个组件。主要是因为我发现这个组件需要把时分秒给分开（如下图），反正我是不太喜欢这个样子，所以我原生了一个。

实现代码：

<!--html-->
<div id="cdTimerDom">
</div>

//vue项目，这是个数字小于0，前面加0的过滤器，因为下面用到了，所以黏贴出来。
filters: {
    addZero: function (value) {
      if(value<10)return '0'+value
      else return value
    },
},

countDownNext(){
      const that = this
      var nowtime = new Date().getTime(),  //获取当前时间毫秒数
          endtime = new Date("2020/12/17").getTime();  //定义结束时间毫秒数
      var showtime = function () {
          var lefttime = endtime - nowtime,  //距离结束时间的毫秒数
              leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
              lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
              leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
              lefts = Math.floor(lefttime/1000%60);  //计算秒数
          //lefttime判断如果结束时间已过返回00：00:00
          if(lefttime>0){
          	//leftd判断如果不超过24小时，不显示天数
          	//that.$options.filters.addZero()调用vue中的过滤器，如上filters
            return leftd>0?that.$options.filters.addZero(leftd) + "天" + that.$options.filters.addZero(lefth) + ":" + that.$options.filters.addZero(leftm) + ":" + that.$options.filters.addZero(lefts):
            that.$options.filters.addZero(lefth) + ":" + that.$options.filters.addZero(leftm) + ":" + that.$options.filters.addZero(lefts)
          }else{
            return '00:00:00'
          }
      }
      setInterval (function () {
        var cdTimerDom = document.getElementById('cdTimerDom')
        var time =showtime()//获取要显示的时间字符串
        var domHtml =''
        //遍历时间字符串
        for(var i =0;i<time.length;i++){
        //判断样式的，不同位置返回不同的样式
          if(i==2||i==5||i==8){
            domHtml +=`<div style="width: 15px;
              background-color: #ffffff;
              border-radius: 4px;
              text-align: center;
              color: #ff662a;
              margin-right: 1px;"> ${time[i]}</div>`
          }else{
            domHtml +=`<div style="width: 13px;
              background-color: #ff662a;
              border-radius: 4px;
              text-align: center;
              color: #ffffff;
              margin-right: 1px;"> ${time[i]}</div>`
          }
        }
        cdTimerDom.innerHTML=domHtml
        nowtime =nowtime +1000
      }, 1000);  //反复执行函数本身
    },