计时器 setInterval 练习，秒杀时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Date日期对象练习</title>
    <style>
      * {
        margin: 0;
        padding: 0px;
      }
      div {
        width: 100%;
        height: 950px;
        background-image: url(./2.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
        line-height: 950px;
      }

      span {
        width: 150px;
        height: 150px;
        border: 3px solid #d4d1b2;
        background: rgba(149, 187, 226, 0.6);
        text-align: center;
        line-height: 150px;
        font-size: 80px;
        color: rgb(255, 255, 255);
        border-radius: 50px;
        display: inline-block;
        
      }
      i {
        font-style: normal;
        font-size: 50px;
        color:aliceblue;
      }
    </style>
  </head>

  <body>
    <div>
      <!-- <p>距离开奖还剩</p> -->
      <span id="h1"></span><i>时</i>
      <span id="m1"></span><i>分</i>
      <span id="s1"></span><i>秒</i>
    </div>

    <script>
      //  1. 倒计时（秒杀） 重点

      //  如何创建日期对象？  通过new Date来创建日期对象
      //  var a = new Date();
      //  console.log(a);

      // 思路： 
        // 1.创建倒计时结束时间；
        // 2.获取 结束时间到1970年之间的时间毫秒数
        // 3.获取当前时间；
        // 4.获取当前时间到1970年之间的时间毫秒数
        // 5.用结束时间到1970年之间的时间毫秒数 - 结束时间到1970年之间的时间毫秒数 = 获取到之间的时间差，转换成秒数；
        // 6.对获取的时间差进行转化 获取 时分秒
        // 7.再将获取到的时分秒 添加到对应的标签中

      var staTime = new Date(2019, 11, 10, 17, 30, 0, 0);  //  创建结束的时间点
      var endTime = staTime.getTime();   // 获取 结束时间到1970年之间的时间毫秒数
      console.log(endTime)
      var a;
      var time, h, m, s;
      setInterval(function () {
          a = new Date();  // 获取当前时间点
          var curTime = a.getTime(); // 获取当前时间点到1970的毫秒数；
          time = parseInt((endTime - curTime) / 1000);  // 获取结束时间到当前时间之间的秒数
          h = parseInt(time / 3600);    //  小时
          m = parseInt(time / 60) - h * 60;  //  分钟
          s = time - h * 3600 - m * 60;  //  秒
          h1.innerHTML = h;
          m1.innerHTML = m;
          s1.innerHTML = s;
      }, 1000)




      // 2. 写一个时钟
      // 思路：1. 获取当前时间
      //   2. 基于当前时间获取具体的时分秒
      //   3. 将获取到的时间添加到标签中
      setInterval(function() {
        var date = new Date();
        var h = date.getHours();
        var f = date.getMinutes();
        var m = date.getSeconds();
        h1.innerHTML = h;
        m1.innerHTML = f;
        s1.innerHTML = m;
      }, 1000);
      // 弊端：这样写完之后刷新页面之后会有一秒的延迟，没有时间显示(完整版)
        function time() {
        var date = new Date();
        var h = date.getHours();
        var f = date.getMinutes();
        var m = date.getSeconds();
        h1.innerText = h;
        m1.innerText = f;
        s1.innerText = m;
      }
      time()
      setInterval(time, 1000);
    </script>
  </body>
</html>
风起，唯有努力生存
发布了75 篇原创文章 · 获赞 7 · 访问量 6900
私信关注
计时器 setInterval 练习， 秒杀 时钟

猜你喜欢

计时器 setInterval 练习，秒杀时钟
