前言

页面上很多地方我们会用到倒计时，比如有个活动倒计时什么时间上线啦，或者其他，还是比较常用的，今天项目里面正好用到了，就封了一个组件，来捋一下思路，大家有需要可以参考

效果

要求传入两个时间开始时间和结束时间
会先判断是活动开始倒计时还是活动结束倒计时
如果是活动开始倒计时那么活动开始倒计时结束后会继续展示活动结束倒计时
如果是活动结束倒计时那么活动结束后就会一直是00 D: 00 H: 00 M: 00S 参考gif
可以根据项目需求自己调整

第一步：设置变量

页面

<div class="count-down">
    {{ day }}&nbsp;
    <span>D :&nbsp;</span>
    {{ hour }}&nbsp;
    <span>H :&nbsp;</span> 
    {{ min }}&nbsp;
    <span>M :&nbsp;</span> 
    {{ sec }}&nbsp;
    <span>S</span>
</div>

我们来设置几个页面上我们会用到的变量

//倒计时剩几天
const day: any = ref('--')
//倒计时剩几小时
const hour: any = ref('--')
//倒计时剩几分钟
const min: any = ref('--')
//倒计时剩几秒
const sec: any = ref('--')
//判断是否开始倒计时
const start = ref(false)

第二步：关键代码逻辑

props: {
//要求必须传入两个时间 开始时间和结束时间
//当前也可以只传入一个时间，逻辑就不涉及开始倒计时和结束倒计时，可以减少一个判断
    startTime: {
      type: Number,
      require: true
    },
    endTime: {
      type: Number,
      require: true
    }
},
setup(props) {
    onMounted(() => {
    //页面一进来开始查询是否开始倒计时
      getTimes()
    })
    onBeforeUnmount(() => {
    //页面销毁的时候清除定时器
      window.clearInterval(timer)
    })
    const getTimes = () => {
      const date = new Date().getTime()
      //判断1.如果当前时间小于开始时间 那么意味着活动还没开始 此时的倒计时就是距离活动开始的倒计时
      if (Number(date) < Number(props.startTime)) {
      //传入定时器的时间也是开始时间
        countDown(props.startTime)
      }
      //判断2.当前时间大于开始时间且小于结束时间 
      //那么意味着活动正在进行 此时的倒计时就是距离活动结束的倒计时
      if (Number(date) >= Number(props.startTime) && Number(date) < Number(props.endTime)) {
      //传入定时器的时间就是结束时间
        countDown(props.endTime)
      }
      //判断3.当前时间大于结束时间 意味着活动已经结束 倒计时也就结束了
      if (Number(date) > Number(props.endTime)) {
          start.value = false
      }
    }
    
    const countDown = time => {
      //说明活动未开始或者活动正在进行中 开始倒计时
      start.value = true
      let nowTime = new Date().getTime()
      let inputTime = time
      let timer: any = null
      //如果传进来的时间-当前时间 == 0 说明倒计时结束
      let times: any = (inputTime - nowTime) / 1000
      timer = setInterval(() => {
        if (times == 0) {
        //倒计时结束时 不确定是哪个倒计时 所以在执行一遍getTimes()
        //如果第一次传进来的时间是开始倒计时 那么再次执行getTimes()就会继续传入结束时间，开始结束倒计时
        //如果第一次传进来的是结束倒计时 那么再次执行getTimes() 就会执行判断3 结束倒计时
          getTimes()
          clearInterval(timer)
          window.clearInterval(timer)
          timer = null
          return
        }
        //定时器开始 times倒计时每一秒都要减1
        times--
        //js获取剩余天数
        let d: string | number = parseInt(String(times / 60 / 60 / 24))
        d = d < 10 ? '0' + d : d
        //js获取剩余小时
        let h: string | number = parseInt(String((times / 60 / 60) % 24))
        h = h < 10 ? '0' + h : h
        //js获取剩余分钟
        let m: string | number = parseInt(String((times / 60) % 60))
        m = m < 10 ? '0' + m : m
        //js获取剩余秒
        let s: string | number = parseInt(String(times % 60))
        s = s < 10 ? '0' + s : s
        //赋值给当前变量
        day.value = d
        hour.value = h
        min.value = m
        sec.value = s
      }, 1000)
    }
   return { day, hour, min, sec, start }
}

说明

这是涉及开始和结束的，相对来说更符合项目，如果说只想传入一个时间来进行倒计时的话，那么只比较当前时间跟传入时间就可以了：

如果当前时间小于传入时间，那么开始倒计时
判断传入时间-当前时间如果==0 时说明倒计时要结束了
直接清除定时器结束倒计时就ok了

总结

注释写的挺详细都在代码里面了，可以参考，逻辑还是比较好理解的，新手小白上路啦

vue3---倒计时组件

前言

效果

第一步：设置变量

第二步：关键代码 逻辑

说明

总结

第二步：关键代码逻辑