JavaScript-如何实现倒计时效果-蒲公英云

JavaScript-如何实现倒计时效果

Bertha 。 2023-06-11 08:24 2阅读 0赞

基本 DOM 结构：

<section>
  <h1>距离光棍节还有</h1>
  <div id="box"></div>
</section>

CSS 样式：

section { 
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
#box { 
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: skyblue;
}
#box span { 
  color: red;
  padding: 0 10px;
}

JS 代码：

// 创建未来时间
function getTomorrow(tomorrow) { 
  return new Date(tomorrow)
}
// 创建当前时间
function getTimes() { 
  return new Date()
}
// 不满两位数补零
function isTens(time) { 
  // 小于十补零返回
  if (time < 10) { 
    return '0' + time
  }
  // 否则直接返回 
  return time
}
function countTime(time) { 
  // 今天距 1970年1月1日的毫秒值
  var today = getTimes().getTime()
  // 未来某天距 1970年1月1日的毫秒值
  var tomorrow = getTomorrow(time).getTime()
  // 未来某天到今天的秒数
  var temp = (tomorrow - today) / 1000
  // 今天距未来某天的天数
  var day = isTens(Math.floor(temp / 60 / 60 / 24))
  // 小时
  var hour = isTens(Math.floor(temp / 60 / 60 % 24))
  // 分钟
  var minute = isTens(Math.floor(temp / 60 % 60))
  // 秒
  var second = isTens(Math.floor(temp % 60 ))
  // var result = day +'天'+ hour +'小时'+ minute +'分钟'+ second + '秒'
  // 使用 JS 中的模板字符串语法替换上一行代码
  var result = ` <span>${ day }</span>天<span>${ hour }</span>小时<span>${ minute }</span>分钟<span>${ second }</span>秒 `
  return result
}
// 获取页面元素并修改值
function getElement(el) { 
  // 获取页面元素
  var box = document.getElementById(el)
  // 向元素中插入内容
  box.innerHTML = countTime('2019/11/10 24:00:00')
}
// 先调用一次函数，消除第一次的等待时间
getElement('box')
// 执行定时器函数
setInterval(getElement, 1000, 'box')