Vue实现倒计时小功能

Vue实现倒计时小功能的完整攻略

在Vue中实现倒计时小功能需要以下几个步骤：

引入Vue组件和相关依赖：首先我们需要在标签中引入Vue.js的相关文件。

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

实现倒计时逻辑：我们可以在Vue实例中定义一个计时器，并在计时器回调中实现倒计时逻辑。

new Vue({
  el: '#app',
  data: {
    remainingTime: '00:00:00'
  },
  created() {
    setInterval(() => {
      const targetTime = new Date('2021-12-31 23:59:59');
      const currentTime = new Date();
      const remainingTime = targetTime - currentTime;
      const hours = Math.floor((remainingTime / 3600000) % 24);
      const minutes = Math.floor((remainingTime / 60000) % 60);
      const seconds = Math.floor((remainingTime / 1000) % 60);
      this.remainingTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`
    }, 1000)
  }
})

在以上代码中，我们定义了一个Vue实例，并在created生命周期中使用setInterval函数来定义计时器，每隔1秒钟计算一次倒计时并更新remainingTime属性，使得组件随着时间的变化而动态更新。

在模板中渲染计时器：最后我们需要在模板中将计时器的状态进行渲染。

<div id="app">
  <p>距离2022年元旦还有：</p>
  <h1>{{ remainingTime }}</h1>
</div>

在以上代码中，我们定义了一个<h1>标签来显示剩余时间。

示例1：实现一个倒计时按钮

除了在模板中直接展示倒计时，我们还可以实现一个倒计时按钮，在点击按钮后开始倒计时。以下是示例代码：

<template>
  <div>
    <button @click="startCountdown">开始倒计时</button>
    <p v-if="remainingTime">剩余时间：{{ remainingTime }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        remainingTime: '',
        timerId: null
      };
    },
    computed: {
      isCountingDown() {
        return this.remainingTime !== '';
      }
    },
    methods: {
      startCountdown() {
        const targetTime = new Date('2021-12-31 23:59:59');
        const currentTime = new Date();
        const remainingTime = targetTime - currentTime;
        const countDown = () => {
          const remainingTime = targetTime - new Date();
          if (remainingTime <= 0) {
            clearInterval(this.timerId);
            this.remainingTime = '';
            return;
          }
          const hours = Math.floor((remainingTime / 3600000) % 24);
          const minutes = Math.floor((remainingTime / 60000) % 60);
          const seconds = Math.floor((remainingTime / 1000) % 60);
          this.remainingTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
        };
        countDown();
        this.timerId = setInterval(countDown, 1000);
      }
    }
  };
</script>

在以上代码中，我们实现了一个<button>标签，在点击后开始倒计时。点击按钮后，我们定义了一个countDown函数来计算剩余时间，并使用setInterval函数来定义计时器，每隔1秒钟调用一次countDown函数，更新剩余时间。当倒计时结束后，我们清除计时器并将剩余时间设为空。

示例2：实现一个可自定义目标日期的倒计时组件

除了预先设置好目标日期，我们还可以实现一个带有自定义选项的倒计时组件。以下是示例代码：

<template>
  <div>
    <label>目标日期：</label>
    <input type="datetime-local" v-model="targetDate" @change="startCountdown" />
    <p v-if="remainingTime">剩余时间：{{ remainingTime }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        targetDate: '',
        remainingTime: '',
        timerId: null
      };
    },
    methods: {
      startCountdown() {
        const targetTime = new Date(this.targetDate);
        const countDown = () => {
          const remainingTime = targetTime - new Date();
          if (remainingTime <= 0) {
            clearInterval(this.timerId);
            this.remainingTime = '';
            return;
          }
          const hours = Math.floor((remainingTime / 3600000) % 24);
          const minutes = Math.floor((remainingTime / 60000) % 60);
          const seconds = Math.floor((remainingTime / 1000) % 60);
          this.remainingTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
        };
        countDown();
        this.timerId = setInterval(countDown, 1000);
      }
    }
  };
</script>

在以上代码中，我们定义了一个可自定义targetDate的倒计时组件。我们使用了<input>标签来让用户通过选择日期来设定目标日期，并使用@change事件来监听用户的选择。在用户选择后，我们根据选定日期计算剩余时间，并使用setInterval函数来定义计时器。每秒钟，我们更新剩余时间，当倒计时结束后，我们清除计时器并将剩余时间设为空。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue实现倒计时小功能 - Python技术站

Vue实现倒计时小功能

相关文章