js倒计时功能 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2 id="title"></h2>
    <script>
      var title = document.querySelector('h2') //获取h2的元素节点

      var endDate = new Date('2023/1/21 00:00:00')
      showTime()
      setInterval(showTime, 1000)
      //封装一个显示时间的函数
      function showTime() {
        var startDate = new Date() //获取当前时间

        var seconds = parseInt((endDate.getTime() - startDate.getTime()) / 1000)
        //天数
        var day = parseInt(seconds / 3600 / 24)
        if (day < 10) day = '0' + day
        //小时
        var hours = parseInt((seconds / 3600) % 24)
        if (hours < 10) hours = '0' + hours
        //分钟
        var min = parseInt((seconds / 60) % 60)
        if (min < 10) min = '0' + min
        //秒数
        var s = parseInt(seconds % 60)
        if (s < 10) s = '0' + s
        var title = document.getElementById('title')
        title.innerHTML = ` 距离春节假期还有<span id="one">${day}</span>天<span id="two">${hours}</span>小时<span id="three">${min}</span>分<span id="foul">${s}</span>秒 ` //模板字符串拼接
      }
    </script>
  </body>
</html>

 

posted @ 2022-05-05 14:01  无何不可88  阅读(43)  评论(0)    收藏  举报