vue3编写倒计时效果

Question

如何通过表单控制倒计时开始时间，比如设定倒计时五分钟，循环几次，点击开始倒计时按钮，就让他从5分00秒，开始每秒减少，然后到0分00秒后，开始下一次循环，显示这是第几次循环

<template>
    <div >
        循环的次数：<input type="text" v-model="cishu"><br>
        每次几分钟：<input type="text" v-model="timeone"><br>
        <button>开始倒计时</button>
    </div>
    <div>
      <div v-if="!finished">
        第几次循环
        {{ minutes }} 分, {{ seconds }} 秒
      </div>
      <div v-else>
        输入错误
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  
  const targetDate = new Date('2028 16:20:00').getTime();
  
  const currentTime = ref(new Date().getTime());
  const timeRemaining = ref(targetDate - currentTime.value);
  
const cishu= ref('5')
  const timeone=ref('3')
  onMounted(() => {
    const interval = setInterval(() => {
      currentTime.value = new Date().getTime();
      timeRemaining.value = targetDate - currentTime.value;
    }, 1000);
  
    return () => clearInterval(interval);
  });
  
  const finished = computed(() => timeRemaining.value <= 0);
//    const days = computed(() => Math.floor(timeRemaining.value / (1000 * 60 * 60 * 24)));
//    const hours = computed(() => Math.floor((timeRemaining.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
  const minutes = computed(() => Math.floor((timeRemaining.value % (1000 * 60 * 60)) / (1000 * 60)));
  const seconds = computed(() => Math.floor((timeRemaining.value % (1000 * 60)) / 1000));
  </script>
  

Answer 1

🕒下午好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：平吞万顷苍茫，吐耀霓虹、剑雄万敌，惊奇自胸中。叹、人狂天地空。

根据你的需求，你需要实现一个可配置倒计时组件，可以设置循环次数和每次倒计时的时间。以下是一个基于Vue3的实现方式：

<template>
  <div>
    循环的次数：<input type="number" v-model="cishu"><br>
    每次几分钟：<input type="number" v-model="timeone"><br>
    <button @click="startCountdown">开始倒计时</button>

    <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);

function startCountdown() {
  if (isNaN(cishu.value) || isNaN(timeone.value)) {
    error.value = true;
    return;
  }

  error.value = false;
  counting.value = true;

  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();

  // 清除倒计时
  onUnmounted(() => {
    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;
});
</script>

这个组件中，我们使用ref来存储输入的循环次数和每次倒计时的时间，并在startCountdown方法中启动定时器进行倒计时。当倒计时结束时，检查是否需要进行下一轮循环，并更新currentCycle的值。同时在卸载组件时清除定时器以防止内存泄漏。注意对用户输入的合法性进行判断，如果输入非法，则显示错误信息。