实际开发中倒计时做法

最新推荐文章于 2024-10-08 19:04:00 发布

前端进阶中

最新推荐文章于 2024-10-08 19:04:00 发布

阅读量112

点赞数

分类专栏： JavaScript 文章标签： html css javascript

本文链接：https://blog.csdn.net/shi15926lei/article/details/127040927

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.结构布局

<div class="big_box">
      <div class="box1">联想秒杀</div>
      <div class="box2">24:00点场 距结束</div>
      <div class="box3">
        <span class="hour">1</span>&nbsp;:&nbsp;
        <span class="minute">2</span>&nbsp;:&nbsp;
        <span class="second">3</span>&nbsp;&nbsp;
      </div>
    </div>

2.html+css样式排版

<style type="text/css">
      .big_box {
        position: relative;
        width: 223px;
        height: 266px;
        background-color: #f00;
        background: url(../../../项目文件/联想项目/imgs/20.png) no-repeat;
        background-size: 223px 266px;
      }
      /* 相同的属性 */
      .big_box .box1,
      .box2,
      .box3 {
        color: #ffffff;
        font-weight: 700;
        position: absolute;
      }
      /* div位置，字体大小 */
      .big_box .box1 {
        font-size: 30px;
        top: 40px;
        left: 50px;
      }
      /* div位置，字体大小 */
      .big_box .box2 {
        font-size: 18px;
        top: 164px;
        left: 45px;
      }
      /* div位置，字体大小 */
      .big_box .box3 {
        font-size: 20px;
        top: 203px;
        left: 55px;
      }
      /* span */
      .hour,
      .minute,
      .second {
        display: inline-block;
        width: 26px;
        height: 26px;
        background-color: #000000;
      }
    </style>

3.javascript详细部分

 <script type="text/javascript">
      let hour = document.querySelector(".hour");
      let minute = document.querySelector(".minute");
      let second = document.querySelector(".second");
      let inputTime = +new Date("2022-12-28 24:00:00");
      countDown(); //先调用一次 防止第一次刷新有空白
      window.setInterval(countDown, 1000);
      function countDown() {
        let nowTime = +new Date();
        // 输入的时间,减去现在当前的时间
        let times = (inputTime - nowTime) / 1000;
        let h = parseInt((times / 60 / 60) % 24);
        h = h < 10 ? "0" + h : h;
        hour.innerHTML = h;
        let m = parseInt((times / 60) % 60);
        m = m < 10 ? "0" + m : m;
        minute.innerHTML = m;
        let s = parseInt(times % 60);
        s = s < 10 ? "0" + s : s;
        second.innerHTML = s;
      }
    </script>