京东秒杀(倒计时效果)

 

 

 <style>
      div {
        width: 400px;
        height: 200px;
        background-color: cornsilk;
      }
      span {
        float: left;
        margin-right: 10px;
        background-color: black;
        width: 50px;
        height: 50px;
        color: white;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="a1">
      <span class="h">1</span>
      <span class="m">2</span>
      <span class="s">3</span>
    </div>
  </body>
  <script>
    // 获取元素
    var hour = document.querySelector(".h");
    var minute = document.querySelector(".m");
    var second = document.querySelector(".s");
    var inputTime = +new Date("2022-4-18 18:00:00"); //返回的是用户输入时间总的毫秒数
    conuntDown();
    // 开启定时器
    setInterval(conuntDown, 1000); //每隔一秒刷新一次

    function conuntDown() {
      var nowTime = +new Date(); //  返回的是当前时间总的毫秒数
      var times = (inputTime - nowTime) / 100; //time是剩余时间总的秒数
      var h = parseInt((times / 60 / 60) % 24);
      h = h < 10 ? "0" + h : h;
      hour.innerHTML = h;
      var m = parseInt((times / 60) % 60);
      m = m < 10 ? "0" + m : m;
      minute.innerHTML = m;
      var s = parseInt(times % 60);
      s = s < 10 ? "0" + s : s;
      second.innerHTML = s;
    }
  </script>

 

posted @ 2022-04-18 13:19  罗砂  阅读(143)  评论(0)    收藏  举报