倒计时.png

如图所示为倒计时的内容

以下分为两种倒计时

1.时间计时器

const time = ref('00时00分00秒') // 用于存储倒计时后的时间
const progressCount = ref(0) // 用于存储原时间总秒
const hour = ref(1) // 用于存储总时间（时）
const minutes = ref(1) // 用于存储总时间（分）
const seconds = ref(1) // 用于存储总时间（秒）

// 正向的计时方法
startTimer() {
    seconds.value += 1;
    if (seconds.value >= 60) {
        seconds.value = 0;
        minutes.value = minutes.value + 1;
    }
    if (minutes.value >= 60) {
        minutes.value = 0;
        hour.value = hour.value + 1;
    }
    time = (hour.value < 10 ? '0' + hour.value : hour.value) + ':' + (minutes.value < 10 ? '0' + minutes.value : minutes.value) + ':' + (seconds.value < 10 ? '0' + seconds.value : seconds.value);
},

2.时间倒计时

const time = ref('00时00分00秒') // 用于存储倒计时后的时间
const progressCount = ref(0) // 用于存储原时间总秒
const hour = ref(1) // 用于存储总时间（时）
const minutes = ref(1) // 用于存储总时间（分）

// 倒计时方法
const startTimer = () => {
  // 都为0停止倒计时  
  if (seconds.value == 0  && minutes.value == 0 && hour.value == 0) {
    return false
  }
  if (seconds.value == 0) {
    seconds.value = 59;
    if (minutes.value == 0) {
      minutes.value = 59;
      hour.value = hour.value - 1;
    } else {
      minutes.value = minutes.value - 1;
    }
  } else {
    seconds.value -= 1;
  }
  ti.value = (hour.value < 10 ? '0' + hour.value : hour.value) + '时' + (minutes.value < 10 ? '0' + minutes.value : minutes.value) + '分' + (seconds.value < 10 ? '0' + seconds.value : seconds.value) + '秒';
}

3.计算进度条的宽度

// 计算宽度 
const computedWidth = computed(() => {
  //  得到当前时长减去年月日的时间戳
  const newCount = new Date(`2024-10-10 ${hour.value}:${minutes.value}:${seconds.value}`).getTime()-1728489600000
  //  总时间戳除以当前的时间戳  得到占比  乘100   得到百分比  设置宽度百分比

  const widthNum = parseInt((newCount / progressCount.value) *60)
  return `${widthNum}%`
})

onMounted(() => {
  // 初始化 计算总时长
  progressCount.value = new Date(`2024-10-10 ${hour.value}:${minutes.value}:${seconds.value}`).getTime()-1728489600000
   // 开启计时器
  setInterval(startTimer, 1000);
});

4. 样式1 Html+Style

倒计时.png

// 进度条标签
<div class="progress">
    <div class="progress-bar">
      <div  :style="{ width: computedWidth }" class="progress-back"></div>
    </div>
    <div class="progress-font"> {{ time }}</div>
 </div>

// 进度条样式
.progress {
  display: flex;
  width: 100%;
  line-height: 70px;
  border-radius: 20px;
  color: #39ce5e;
  .progress-bar {
    width: 60%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #39ce5e;
    border-radius: 20px;
    margin-top: 25px;
    .progress-back {
      width: 100%;
      height: 18px;
      border-radius: 20px;
      background-color: #39ce5e;
    }
  }
  .progress-font {
    display: inline-block;
    padding-left: 10px;
    color: #39ce5e;
  }
}

5. 样式2 Html+Style

倒计时.png

// 进度条标签
<div :class="details !='除雪间隔倒计时' ? 'progress-blue': ''"  class="progress">
    <div class="progress-bar">
      <div class="progress-back" :style="{ width: computedWidth }"></div>
    </div>
    <div class="progress-font" :style="{ right: computedWidth }"> {{ti}}</div>
</div>

// 进度条样式
.progress {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: #39ce5e;
  position: relative;
  .progress-bar {
    width: 100%;
    height: 15px;
    background-color: #fff;
    border: 1px solid #39ce5e;
    border-radius: 15px;
    margin-top: 25px;
    .progress-back {
      position: absolute;
      right: 0px;
      width: 100%;
      height: 13px;
      border-top-right-radius: 13px;
      border-bottom-right-radius: 13px;
      background-color: #39ce5e;
    }
  }
  .progress-font {
    display: inline-block;
    width: 40%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: -10px;
    right: 60%;
    padding: 0 10px;
    color: #fff;
    background-color: #39ce5e;
    border-radius: 20px;
  }
}