当前位置：首页 > VUE

vue实现倒计时功能

2026-01-11 20:29:30VUE

vue实现倒计时功能

在Vue中实现倒计时功能可以通过多种方式完成，以下是几种常见的方法：

方法一：使用setInterval和clearInterval

创建一个倒计时组件，利用setInterval和clearInterval实现倒计时逻辑。

<template>
  <div>
    <p>{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeRemaining: 60, // 倒计时总秒数
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.timeRemaining / 60)
      const seconds = this.timeRemaining % 60
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
  },
  mounted() {
    this.startTimer()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.timeRemaining > 0) {
          this.timeRemaining--
        } else {
          clearInterval(this.timer)
          // 倒计时结束后的操作
        }
      }, 1000)
    }
  }
}
</script>

方法二：使用Vue的响应式特性和requestAnimationFrame

对于需要更高精度的倒计时，可以使用requestAnimationFrame。

<template>
  <div>
    <p>{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeRemaining: 60,
      startTime: null,
      animationFrameId: null
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.timeRemaining / 60)
      const seconds = this.timeRemaining % 60
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
  },
  mounted() {
    this.startAnimationTimer()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrameId)
  },
  methods: {
    startAnimationTimer() {
      this.startTime = Date.now()
      const updateTimer = () => {
        const elapsed = Math.floor((Date.now() - this.startTime) / 1000)
        this.timeRemaining = Math.max(0, 60 - elapsed)

        if (this.timeRemaining > 0) {
          this.animationFrameId = requestAnimationFrame(updateTimer)
        } else {
          // 倒计时结束后的操作
        }
      }
      this.animationFrameId = requestAnimationFrame(updateTimer)
    }
  }
}
</script>

方法三：使用第三方库（如moment.js或day.js）

如果需要更复杂的时间格式化，可以结合第三方库使用。

<template>
  <div>
    <p>{{ formattedTime }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      endTime: dayjs().add(60, 'second'), // 结束时间为当前时间加60秒
      timer: null,
      currentTime: dayjs()
    }
  },
  computed: {
    formattedTime() {
      const diffSeconds = this.endTime.diff(this.currentTime, 'second')
      const minutes = Math.floor(diffSeconds / 60)
      const seconds = diffSeconds % 60
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = dayjs()
      if (this.currentTime.isAfter(this.endTime)) {
        clearInterval(this.timer)
        // 倒计时结束后的操作
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

注意事项

vue实现倒计时功能