vue3 实现圆圈背景色变化的倒计时

 

<template>
  <div :style="circleStyle"></div>
  <p>{{ minutes }}:{{ seconds < 10 ? '0' + seconds : seconds }}</p>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
const timerId = ref(null);
const minutes = ref(20);
const seconds = ref(0);
const totalTime = 120; // 20分钟的总秒数
const remainingTime = ref(totalTime); // 剩余时间（秒）

const circleStyle = ref({
      width: '100px',
      height: '100px',
      'margin-right':'10px',
      borderRadius: '50%'
    });

// 倒计时
const startTimerId = () => {
  timerId.value = setInterval(() => {
    if (remainingTime.value === 0) {
      clearInterval(timerId);
      // 倒计时结束的逻辑
      } else {
        if (seconds.value === 0) {
        minutes.value--;
        seconds.value = 59;
      } else {
        seconds.value--;
      }
        remainingTime.value--;
        const bluePercentage = (remainingTime.value / totalTime) * 100;
        const yellowPercentage = 100 - bluePercentage;
        circleStyle.value.background = `conic-gradient(#DFE3E9 0deg, #DFE3E9 ${bluePercentage}%, #FFD43B ${bluePercentage}%, #FFD43B ${yellowPercentage}%, #FFD43B 360deg)`;
        }
      }, 1000);
}
startTimerId()
// 在页面销毁时关闭定时器
onBeforeUnmount(() => {
  clearInterval(timerId.value);
});
</script>