JavaScript-如何实现倒计时效果

Bertha 。 2023-06-11 08:24 44阅读 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')

![在这里插入图片描述][20191029211946205.png]

[20191029211946205.png]: /images/20230531/4f0769dadd3b44bfa8fb5f19732aef22.png