倒計(jì)時(shí).png

如圖所示為倒計(jì)時(shí)的內(nèi)容

以下分為兩種倒計(jì)時(shí)

1.時(shí)間計(jì)時(shí)器

const time = ref('00時(shí)00分00秒') // 用于存儲倒計(jì)時(shí)后的時(shí)間
const progressCount = ref(0) // 用于存儲原時(shí)間總秒
const hour = ref(1) // 用于存儲總時(shí)間（時(shí)）
const minutes = ref(1) // 用于存儲總時(shí)間（分）
const seconds = ref(1) // 用于存儲總時(shí)間（秒）

// 正向的計(jì)時(shí)方法
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.時(shí)間倒計(jì)時(shí)

const time = ref('00時(shí)00分00秒') // 用于存儲倒計(jì)時(shí)后的時(shí)間
const progressCount = ref(0) // 用于存儲原時(shí)間總秒
const hour = ref(1) // 用于存儲總時(shí)間（時(shí)）
const minutes = ref(1) // 用于存儲總時(shí)間（分）

// 倒計(jì)時(shí)方法
const startTimer = () => {
  // 都為0停止倒計(jì)時(shí)  
  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) + '時(shí)' + (minutes.value < 10 ? '0' + minutes.value : minutes.value) + '分' + (seconds.value < 10 ? '0' + seconds.value : seconds.value) + '秒';
}

3.計(jì)算進(jìn)度條的寬度

// 計(jì)算寬度 
const computedWidth = computed(() => {
  //  得到當(dāng)前時(shí)長減去年月日的時(shí)間戳
  const newCount = new Date(`2024-10-10 ${hour.value}:${minutes.value}:${seconds.value}`).getTime()-1728489600000
  //  總時(shí)間戳除以當(dāng)前的時(shí)間戳  得到占比  乘100   得到百分比  設(shè)置寬度百分比

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

onMounted(() => {
  // 初始化 計(jì)算總時(shí)長
  progressCount.value = new Date(`2024-10-10 ${hour.value}:${minutes.value}:${seconds.value}`).getTime()-1728489600000
   // 開啟計(jì)時(shí)器
  setInterval(startTimer, 1000);
});

4. 樣式1 Html+Style

倒計(jì)時(shí).png

// 進(jìn)度條標(biāo)簽
<div class="progress">
    <div class="progress-bar">
      <div  :style="{ width: computedWidth }" class="progress-back"></div>
    </div>
    <div class="progress-font"> {{ time }}</div>
 </div>

// 進(jìn)度條樣式
.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

倒計(jì)時(shí).png

// 進(jìn)度條標(biāo)簽
<div :class="details !='除雪間隔倒計(jì)時(shí)' ? '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>

// 進(jìn)度條樣式
.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;
  }
}