使用时间戳,制作一个高考倒计时

268 阅读1分钟

image.png

难点在于 类似这个填空题 9600000秒 = ()天()小时()分()秒

推算过程: 天= 总秒数 除以 24 * 60*60

小时 = 总秒数 % ( 24 * 60*60) / 3600

分钟 = (总秒数 % (246060)%3600) / 60

秒数 = (总秒数 % (246060)%3600) % 60

写完全部的innerHTML,要把所有的放到setInterval里面,间隔执行函数,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>
    <style>
      h1 {
        margin: 0 auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>
      距离高考结束还有
      <span id="day"></span><span id="hour"></span>小时
      <span id="minute"></span>分钟 <span id="second"></span></h1>
  </body>


  <script>
    setInterval(() => {
      // 先把秒换成()天()小时()分()秒,写进各个innerHTML
      // 总的要放入一个setinterval里面
      var daySpan = document.getElementById("day");
      var hourSpan = document.getElementById("hour");
      var minuteSpan = document.getElementById("minute");
      var secoudSpan = document.getElementById("second");

      // 当前的时间戳,结果保留到秒,保留整数
      var times1 = parseInt(new Date() / 1000);

      //   获取高考那天的时间戳,结果保留到秒,保留整数
      var times2 = parseInt(new Date("2023-6-8 8:30:30") / 1000);
      // 两个时间戳相减,就得到了一个倒计时的总的秒数
      var times3 = times2 - times1;
      // 计算times3 = ()天()小时()分()秒
      daySpan.innerHTML = parseInt(times3 / (24 * 60 * 60));
      hourSpan.innerHTML = parseInt((times3 % (24 * 60 * 60)) / 3600);
      minuteSpan.innerHTML = parseInt(((times3 % (24 * 60 * 60)) % 3600) / 60);
      secoudSpan.innerHTML = parseInt(((times3 % (24 * 60 * 60)) % 3600) % 60);
    }, 1000);
  </script>
</html>