javascript制作一个倒计时

97 阅读1分钟
<!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>
    <!-- 要做的,就是在这个h1里面添加内容 -->
    <h1></h1>
  </body>
  <script>
    // 找到h1 并往里面添加内容
    var h1 = document.querySelector("h1");

    setInterval(function () {
      var str = "距离2023年高考还有:";
      // str里面是时间在慢慢变化,1秒执行一次,所以用setinterval函数的方式定时调用函数
      // 当执行setinterval时候,里面的内容如下
      // 当前的时间戳
      // 用new得到是一个对象,可以打点调用属性或者方法
      var timestamp1 = parseInt(new Date().getTime() / 1000); /* 当前的时间戳 */
      // 确定时期的时间戳
      var timestamp2 = parseInt(new Date("2023-6-7 8:30:00").getTime() / 1000);
      // 时间戳一直在变化,所以时间戳的差也一直在变化
      var timestamp3 = timestamp2 - timestamp1;
      // 现在得到了一个总的秒数
      // 总秒数 = 天 * 24小时 * 60分钟 * 60秒
      var day = parseInt(timestamp3 / (60 * 60 * 24));
      str = str + day + "天";
      var hour = parseInt((timestamp3 % (60 * 60 * 24)) / 3600);
      str = str + hour + "小时";
      var minute = parseInt(((timestamp3 % (60 * 60 * 24)) % 3600) / 60);
      str = str + minute + "分钟";

      var second = parseInt(((timestamp3 % (60 * 60 * 24)) % 3600) % 60);

      str = str + second + "秒钟";
      //   h1也是一秒变化一次,所以都要放在定时执行函数setinterval里面
      h1.innerHTML = str;
    }, 10);
  </script>
</html>