vue3编写倒计时效果

最新推荐文章于 2025-04-15 15:41:56 发布

叫兽-郭老师

最新推荐文章于 2025-04-15 15:41:56 发布

阅读量856

点赞数 6

分类专栏：优快云问答模板解答文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_23126581/article/details/137139756

版权

优快云问答模板解答专栏收录该内容

27 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue3中创建一个倒计时功能，包括从设定的起始时间（如5分钟）开始每秒递减，并在达到0后开始下一轮循环，同时记录循环次数。此外，还讨论了点击开始按钮后隐藏表单以及计时结束后需刷新才能正常运行的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：来自优快云-问答板块，题主提问。

需求：如何通过表单控制倒计时开始时间，比如设定倒计时五分钟，循环几次，点击开始倒计时按钮，就让他从5分00秒，开始每秒减少，然后到0分00秒后，开始下一次循环，显示这是第几次循环，能不能点击开始倒计时，然后这个表单隐藏起来，还有就是计时结束之后，再设置计时得刷新才能正常。

一、解决代码

<template>
  <div>
    <div v-if="showForm">
      循环的次数：<input type="number" v-model="cishu"><br>
      每次几分钟：<input type="number" v-model="timeone"><br>
      <button @click="startCountdown">开始倒计时</button>
    </div>
 
    <div>
      <div v-if="counting">
        第{{ currentCycle }}次循环 {{ formattedTime }}
      </div>
      <div v-else-if="finished">
        倒计时完成
      </div>
      <div v-else-if="error">
        输入错误
      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
 
const countdownInterval = ref<NodeJS.Timeout | null>(null);
const cishu = ref<number>(5);
const timeone = ref<number>(3);
const currentCycle = ref<number>(1);
const counting = ref<boolean>(false);
const error = ref<boolean>(false);
const showForm = ref(true);
 
function startCountdown() {
  if (isNaN(cishu.value) || isNaN(timeone.value)) {
    error.value = true;
    return;
  }
 
  error.value = false;
  counting.value = true;
  showForm.value = false;
 
  let remainingSeconds = timeone.value * 60;
  const countdownFn = () => {
    if (remainingSeconds <= 0) {
      if (currentCycle.value < cishu.value) {
        currentCycle.value++;
        remainingSeconds = timeone.value * 60;
      } else {
        counting.value = false;
        finished.value = true;
        return;
      }
    }
 
    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = remainingSeconds % 60;
 
    // 更新显示的时间
    formattedTime.value = `${minutes} 分, ${seconds.toString().padStart(2, '0')} 秒`;
 
    remainingSeconds--;
 
    // 每秒递减
    countdownInterval.value = setTimeout(countdownFn, 1000);
  };
 
  countdownFn();
 
  // 清除倒计时
  onMounted(() => {
    clearTimeout(countdownInterval.value!);
  });
}
 
// 格式化显示的时间
const formattedTime = ref<string>('00 分, 00 秒');
const finished = ref<boolean>(false);
 
watch([cishu, timeone], () => {
  counting.value = false;
  finished.value = false;
  error.value = false;
});
 
watch(finished, (newValue) => {
  if (newValue) {
    window.location.reload();
  }
});
</script>