基于dayjs的一个倒计时功能

484 阅读1分钟
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);  // 格式化插件


let timeOut = null

// 定时器方法
const setCountdown = ()=>{
    if (timeOut){
        clearTimeout(timeOut);
        timeOut = null;
    }
    
    timeOut = setTimeout(()=>{
        // 不需要每次都去计算定时器执行花费的时间 在 diffTime() 减去当前时间就是最新的倒计时间
        diffTime(); 
        setCountdown();
    },1000)

}
// 处理时间
// targetTime 目标时间点
const diffTime = (targetTime = '2024-06-03 23:59:59')=>{
    // 可以先判断一下是否是时间格式和当前时间是不是在目标时间之后
    // if (!dayjs(endTime).isValid() || dayjs().isAfter(dayjs(time))) return;
    
   targetTime = dayjs(targetTime); // 转成dayjs对象
   const diffNow = targetTime.diff(dayjs(), 'dates'); // 计算相差的时间
   const durationTime = dayjs.duration(diffNow); // 格式化
   
   // 以下都是格式好了时间
   const hours = durationTime.get('hours'); // 获取小时
   const minutes = durationTime.get('minutes'); // 获取分钟
   const seconds = durationTime.get('seconds'); // 获取秒
   // const years = durationTime.get('years');
   // const months = durationTime.get('months');
   // const days = durationTime.get('days');
   
   // 如果倒计时需要天 重新获取一下多少天 (年、月一样)
    const days = targetTime.diff(dayjs(), 'days');
    // 补 0 
    let str = `${padNumber(hours)}:${padNumber(minutes)}:${padNumber(seconds)}`;
    if (days > 0) {
       str = `${days}天 ` + str;
    }
    
    return str
    
}


const padNumber = (num, length = 2) => (Array(length).join('0') + num).slice(-length);


个人开发记录,有错误请指正