使用Vue.js实现一个循环倒计时功能

<template>
  <div>
    <h2>距离活动开始还有 {{ countdown }} 秒</h2>
    <button @click="startCountdown">开始倒计时</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 60, // 初始倒计时秒数
      intervalId: null // 存储setInterval返回的ID
    };
  },
  methods: {
    startCountdown() {
      if (!this.intervalId) {
        this.intervalId = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          } else {
            clearInterval(this.intervalId);
            alert('倒计时结束！');
          }
        }, 1000);
      }
    }
  }
};
</script>

methods: {
  startCountdown() {
    if (!this.intervalId) {
      this.intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.intervalId);
          this.countdown = 60; // 重置倒计时
          this.startCountdown(); // 重新启动计时器
        }
      }, 1000);
    }
  }
}

computed: {
  formattedCountdown() {
    let hours = Math.floor(this.countdown / 3600);
    let minutes = Math.floor((this.countdown % 3600) / 60);
    let seconds = this.countdown % 60;
    return `${hours}小时${minutes}分钟${seconds}秒`;
  }
}

<button @click="stopCountdown">停止倒计时</button>

methods: {
  stopCountdown() {
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    const redirectAfterCountdown = () => {
      clearInterval(intervalId);
      router.push('/target-page');
    };

    return {
      redirectAfterCountdown
    };
  }
};