vue3.0 5分钟倒计时，60秒倒计时

亲测好用的组件 5分钟倒计时也可以做成60秒倒计时

main.vue引入countDown.vue

倒计时：<countDown :minutes="5" :seconds="0" @stopCountdown="stopCountdown"></countDown>

<script setup lang="ts">

import countDown from './components/countDown.vue'

const stopCountdown = () => {

  showKeBiao.value = false;

}

</script>

countDown.vue

<template>
  <!-- <span>5分钟倒计时、60秒倒计时</span> -->
  <span v-if="minutes">{{ minutes }}分</span>
  <span>{{ seconds }}秒</span>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue';
const props = defineProps({
  // 父组件传过来的参数
  minutes: {
    type: Number,
    default: 0
  },
  seconds: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits();
// 分钟数，初始化为5
const minutes = ref(props.minutes);
// 秒数，初始化为0
const seconds = ref(props.seconds);
// 总的秒数，用于计算倒计时
const totalSeconds = ref(minutes.value * 60 + seconds.value);

// 计时器的引用，用于后续清除计时器
let timer = null;

// 组件挂载时启动倒计时
onMounted(() => {
  startCountdown();
});

// 定义开始倒计时的函数
const startCountdown = () => {
  if (totalSeconds.value > 0) {
    timer = setInterval(() => {
      totalSeconds.value--;
      // 重新计算分钟和秒数
      minutes.value = Math.floor(totalSeconds.value / 60);
      seconds.value = totalSeconds.value % 60;
    }, 1000);
  } else {
    // 倒计时结束，清除计时器
    stopCountdown()
  }
};

// 使用watchEffect来监听totalSeconds的变化，当变化时更新UI
watchEffect(() => {
  if (totalSeconds.value <= 0) {
    stopCountdown()
  }
});


const stopCountdown = () => {
  clearInterval(timer);
  emit('stopCountdown')
  console.log('倒计时结束！');
};

</script>

<style>
</style>

界面效果：

 

---

 

5分钟倒计时写法：

<div>倒计时：{{countdownTime/(1000 * 60 * 1)}} 分钟</div>

//**倒计时
const countdownTime = ref(1000 * 60 * 5);
const timer: any = ref(null)
// 开始计时器
const countTimer = () => {
  timer.value = setTimeout(() => {
    if (countdownTime.value > 0) {
      countdownTime.value -= 1000 * 60 * 1;
      countTimer();
    }

  }, 1000 * 60 * 1); // 每1分钟执行一次
};


watch(() => countdownTime, () => {
  if (countdownTime.value <= 0) {
    clearTimeout(timer.value);
    showKeBiao.value = false;
  }
}, {
  deep: true,
})
watch(() => showKeBiao, () => {
  if (showKeBiao) {
    countdownTime.value = 1000 * 60 * 5;
  }else{
    countdownTime.value = 0;
  }
}, {
  deep: true,
})
//倒计时结束

---

 

60秒倒计时：

<span>{{ remainingTime }}</span>

//倒计时
const remainingTime = ref(10);
const timer: any = ref(null)
// 开始计时器
const startTimer = () => {
  timer.value = setTimeout(() => {
    if (remainingTime.value > 0) {
      remainingTime.value -= 1;
      startTimer();
    }

  }, 1000); // 每1000毫秒减少1秒
};

watch(() => remainingTime, () => {
  if (remainingTime.value <= 0) {
    clearTimeout(timer.value);
  }
}, {
  deep: true,
})