时间倒计时

倒计时逻辑代码

// 倒计时
export const timeDown= (endTime) => {
  if(isNaN(endTime) && !isNaN(Date.parse(endTime))) {
    let nowTime = new Date();  //开始时间
    let endTimer = new Date(endTime); //结束时间
    let totalS = parseInt((endTimer - nowTime) / 1000);  //总的秒数
    let Days = parseInt(totalS/(60*60*24)); //天数    
    let mol = totalS % (60*60*24); //取余数
    let Hours = parseInt(mol / (60*60));
    if(Hours < 10)
    {
        Hours = '0' + Hours;
    }
    mol = mol % (60*60);
    let Minutes = parseInt(mol / 60); //分钟
    if(Minutes < 10)
    {
        Minutes = '0' + Minutes;
    }
    let Seconds = mol % 60;
    if(Seconds < 10)
    {
        Seconds = '0' + Seconds;
    }
  return {Days,Hours,Minutes,Seconds}
  }else{
    console.log(`${endtime}不是时间格式`)
    return  false
  }

}

引入js倒计时

import { timeDown } from '@/xx/timeDown';

开始时间为当前时间，结束时间需要传入 获取倒计时

    //获取倒计时
    countdown (endDate) {
      //判断时间是否已经结束设置为'00
      let newTime = new Date().getTime();//获取当前时间
      let endTime = new Date(endDate).getTime();;//获取结束时间的时间戳
      console.log(newTime, 55, endTime)
      if (endTime - newTime > 0) {
        this.timeClear = setInterval(function () {
          //匿名调用Date的自定义内置函数,传入结束的日期,返回一个对象
          let obj = timeDown(endDate);
          //获取倒计时需要渲染的元素 {Days,Hours,Minutes,Seconds} 
          let spanContent = document.querySelector('.time_down').children;
          spanContent[0].innerHTML = obj.Days;
          spanContent[1].innerHTML = obj.Hours;
          spanContent[2].innerHTML = obj.Minutes;
          spanContent[3].innerHTML = obj.Seconds;
          console.log("obj-------------------", obj)
          //对返回值结果判定
          if (undefined === this.timeClear) {
            clearInterval(this.timeClear);
            return;
          }
          //把数据渲染到页面

          //时间到了清除定时器
          if (0 === obj.Days && 0 === obj.Hours && 0 === obj.Minutes && 0 === obj.Seconds) {
            clearInterval(this.timeClear);
          }
        }, 1000)
      } else {
        return
      }
    }

使用倒计时

   this.countdown("2023-6-30 10:27:00") 

效果图