vue实现时间倒计时功能

以下是“vue实现时间倒计时功能”的完整攻略，希望能对您有所帮助。

基本思路

Vue 实现时间倒计时功能的基本思路是：获取倒计时的起始时间和结束时间，然后通过 setInterval 函数计算时间差并更新视图上的倒计时剩余时间。

具体步骤

1.在Vue组件中定义起始时间和结束时间。

data() {
  return {
    startTime: new Date('2021-08-01 00:00:00').getTime(),
    endTime: new Date('2021-08-10 18:00:00').getTime(),
    restTime: {}
  }
},

2.计算时间差，更新剩余时间。

computed: {
  getTimeRemain() {
    let seconds = Math.floor((this.endTime - new Date().getTime()) / 1000)
    if (seconds <= 0) return false
    let rest = {}
    rest.hours = Math.floor(seconds / 3600)
    rest.minutes = Math.floor((seconds - rest.hours * 3600) / 60)
    rest.seconds = seconds - rest.hours * 3600 - rest.minutes * 60
    this.restTime = rest
    return true
  }
},

3.使用 setInterval 函数更新视图上的倒计时时间。

showTime() {
  setInterval(() => {
    this.getTimeRemain;
  }, 1000)
}

4.在模板中渲染出倒计时时间。

<p>{{ restTime.hours }}小时{{ restTime.minutes }}分钟{{ restTime.seconds }}秒</p>

示例说明

下面介绍两个示例来说明 Vue 实现时间倒计时功能。

示例1

假设现在是2021年8月1日，要实现一个倒计时，显示从现在到 2021年8月10日下午6点的倒计时时间。

<template>
  <div>
    <p v-if="getTimeRemain">
      {{ restTime.hours }}小时{{ restTime.minutes }}分钟{{ restTime.seconds }}秒
    </p>
    <p v-else>倒计时结束</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: new Date().getTime(),
      endTime: new Date('2021-08-10 18:00:00').getTime(),
      restTime: {}
    }
  },
  computed: {
    getTimeRemain() {
      let seconds = Math.floor((this.endTime - new Date().getTime()) / 1000)
      if (seconds <= 0) return false
      let rest = {}
      rest.hours = Math.floor(seconds / 3600)
      rest.minutes = Math.floor((seconds - rest.hours * 3600) / 60)
      rest.seconds = seconds - rest.hours * 3600 - rest.minutes * 60
      this.restTime = rest
      return true
    }
  },
  mounted() {
    setInterval(() => {
      this.getTimeRemain;
    }, 1000)
  }
}
</script>

示例2

假设现在是2021年8月1日，要实现一个倒计时，显示从现在到 2021年8月10日下午6点的剩余小时数。

<template>
  <div>
    <p v-if="getTimeRemain">
      剩余时间：{{ restTime.hours }}小时
    </p>
    <p v-else>倒计时结束</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: new Date().getTime(),
      endTime: new Date('2021-08-10 18:00:00').getTime(),
      restTime: {}
    }
  },
  computed: {
    getTimeRemain() {
      let seconds = Math.floor((this.endTime - new Date().getTime()) / 1000)
      if (seconds <= 0) return false
      let rest = {}
      rest.hours = Math.floor(seconds / 3600)
      this.restTime = rest
      return true
    }
  },
  mounted() {
    setInterval(() => {
      this.getTimeRemain;
    }, 1000)
  }
}
</script>

这两个示例都演示了如何通过Vue计算倒计时剩余时间，第一个示例展示了如何渲染出剩余时间的小时，分钟和秒数，第二个示例只展示了小时数。