vue中实现倒计时组件与毫秒效果

时分秒倒计时组件

template

script

备注：我将时分秒使用计算属性分成了个位和十位两部分展示，在watch中深度监听endTime属性的变化并重新调用定时器

style

使用

在页面中引入并注册后即可使用

毫秒倒计时效果

在template中加入
:00

声明timeDt方法

methods: {
    timeDt () {
      this.timer1 = setTimeout(function () {
        var haomiao = 99
        document.getElementById('timehs').innerHTML = ':' + haomiao
        this.timer2 = setInterval(function () {
          const timehs = document.getElementById('timehs')
          if (timehs) {
            timehs.innerHTML = `:${haomiao < 10 ? `0${haomiao}` : haomiao}`
          }
          haomiao--
          if (haomiao < 0) {
            haomiao = 99
          }
        }, 10)
      }, 1000)
    }
  }

在create生命周期函数中调用timeDt方法

created () {
    this.$nextTick(() => {
      this.timeDt()
    })
  },