js统计时间段总时长的倒计时

规则说明：
1.时间段：09:00-19:00 和 19:00-02:00(次日)
2.分别计算出两个时间段的总时长，数据格式为 HH: MM:SS
3.当前时间符合哪个时间段，就按照哪个时间段的总时长
4.每一秒中刷新一下总时长

Vue3 代码块

// Countdown.vue

<template>
   <main class='countdown_wrapper'>
      {{countdown}}
   </main>
</template>
<script lang="ts" setup>
  import {ref,reactive} from 'vue'
  const countdown = ref(0) // 倒计时
  
  // 格式 HH:MM:SS
  const HHMMSSFormatTime = (endTime) => {
     const now = new Date().getTime();
     const distance = endTime - now; // 总计结束时间-当前时间 拿到时间差
     const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
     const seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
     return { hours, minutes, seconds };
  }
  // 更新总时长的倒计时
  const updateCoundownTime = () => {
   const now = new Date();
   const hours = now.getHours();
   const minutes = now.getMinutes();

   let endTime; // 初始化结束时间

   if (hours >= 9 && hours < 19) { // 时间段为  09:00-19:00，设置结束时间
     endTime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),19,0,0); // 设置结束时间为19:00
   } else if (hours >= 19 || hours < 2) { // 时间段为 19:00-02:00（次日），设置结束时间
     endTime = new Date(now.getFullYear(),now.getMonth(),now.getDate() + 1, 2, 0, 0 ); // 设置结束时间为 次日02:00
   }

   if (endTime) {
     const remaining = getRemainingTime(endTime); // 拿到剩余时间
     countdown.value = `${remaining.hours}:${remaining.minutes}:${remaining.seconds}` // 设置显示的剩余时间
   }
  }
  onMounted(() => {
    setInterval(updateCoundownTime, 1000);
  });
<script/>

React 代码块

// Countdown.js
import {React,{useEffect,useState}} from 'react'
import css from "./index.scss"; // 引用的外联样式表
function Coundown (){
  const [countdown,setCountdown] = useState(0) // 倒计时
  
  useEffect(()=>{
     setInterval(()=>{
        updateCoundownTime() 
     },1000) // 每一秒刷新一回
  },[])

   // 格式 HH:MM:SS
  const HHMMSSFormatTime = (endTime) => {
     const now = new Date().getTime();
     const distance = endTime - now; // 总计结束时间-当前时间 拿到时间差
     const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
     const seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
     return { hours, minutes, seconds };
  }
  // 更新总时长的倒计时
  const updateCoundownTime = () => {
     const now = new Date();
     const hours = now.getHours();
     const minutes = now.getMinutes();

     let endTime; // 初始化结束时间

     if (hours >= 9 && hours < 19) { // 时间段为  09:00-19:00，设置结束时间
        endTime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),19,0,0); // 设置结束时间为19:00
     } else if (hours >= 19 || hours < 2) { // 时间段为 19:00-02:00（次日），设置结束时间
        endTime = new Date(now.getFullYear(),now.getMonth(),now.getDate() + 1, 2, 0, 0 ); // 设置结束时间为 次日02:00
     }

     if (endTime) {
        const remaining = getRemainingTime(endTime); // 拿到剩余时间
        setCountdown(`${remaining.hours}:${remaining.minutes}:${remaining.seconds}`) // 设置显示的剩余时间
     }
  }

  return (
    <main>
       <span className={css.countdown_wrapper}>{countdown}</span>
    </main>
  )
}