自制倒计时的demo

因为最近用到倒计时,突然想起来如果不用插件的话,该怎么写一个倒计时呢?

//html
<div class="set_interval">
  <span class="time"></span>
  <span class="time"></span>
  <span class="time"></span>
  <span class="time"></span>
</div>
//js
function set_interval(time) {
    
    
  //time是一个参数,通过函数传递进去
  let nowDate = new Date(); //时间对象
  let setStopTime = new Date(time); //设置一个要过期的时间
  let totalSecond = Math.round((setStopTime - nowDate) / 1000); //转换成以秒为单位,四舍五入
  let integerDays = parseInt(totalSecond / 60 / 60 / 24); //获取天数,取整
  let integerHours = parseInt((totalSecond / 3600) % 24); //获取小时,然后对24取余得到的就是倒计时的小时数
  let integerMinutes = parseInt((totalSecond / 60) % 60); //获取分钟数,对60取余就是倒计时的分钟数
  let integerSeconds = parseInt(totalSecond % 60); //得到秒数
  //对数据进行处理,去过小于10的话,我们转换一下数据
  integerDays = integerDays >= 10 ? integerDays : "0" + integerDays;
  integerHours = integerHours >= 10 ? integerHours : "0" + integerHours;
  integerMinutes = integerMinutes >= 10 ? integerMinutes : "0" + integerMinutes;
  integerSeconds = integerSeconds >= 10 ? integerSeconds : "0" + integerSeconds;
  let timeList = document.getElementsByClassName("time");
  timeList[0].innerHTML = integerDays;
  timeList[1].innerHTML = integerHours;
  timeList[2].innerHTML = integerMinutes;
  timeList[3].innerHTML = integerSeconds;
  if (totalSecond <= 0) {
    
    
    return;
  }
}
setInterval(() => {
    
    
  set_interval("2019-12-01 00:00:00");
}, 1000);

猜你喜欢

转载自blog.csdn.net/weixin_45356397/article/details/103196773
今日推荐