案例：京东秒杀

 

css部分

<style>
        div {
            background-color: rgb(246,71,45);
            width: 134px;
            height: 192px;
        }
        .one{
            color: aliceblue;
            text-align: center;
            font-size: 24px;
            padding-top: 36px;
        }
        .two {
            color: rgb(253,147,116);
            margin-top: -22px;
            padding-left: 16px;
        }
        .three {
            color: aliceblue;
            font-size: 8px;
            margin-top: -10px;
            padding-left: 6px;
        }
        img {
            position: relative;
            left: 60px;
            top: -8px;
            width: 15px;
            height: 23px;
            
        }

      div span {
        float: left;
        display: block;
        margin-right: 4px;
        width: 35px;
        height: 35px;
        background-color: #000;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-weight: 700;
      }
    </style>

html部分

    <div>
        <p class="one">京东秒杀</p>
        <p class="two">FLASH DEALS</p>
        <img src="./电,闪电,电力,电量.png" alt="">
        <p class="three">本场距离商品结束还剩</p>
            <span class="hour">1</span>
            <span class="minute">2</span>
            <span class="second">3</span>
      
    </div>

js部分

<script>
              //1.获取元素
             
      var hour = document.querySelector(".hour"); //小时的黑色盒子
      var minute = document.querySelector(".minute"); //分钟的黑色盒子
      var second = document.querySelector(".second"); //秒数的黑色盒子
      var inputTime = +new Date("2022-10-18 13:00:00"); //返回的是用户输入时间总的毫秒数
      countDown(); //我们先调用一次这个函数，防止第一次刷新页面有空白
      //开启定时器
      setInterval(countDown, 1000);
      function countDown() {
        var nowTime = +new Date(); //返回的是当前时间总的毫秒数

        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        var h = parseInt((times / 60 / 60) % 24); //时
        h = h < 10 ? "0" + h : h;
        hour.innerHTML = h; //把剩余的小时给 hour 盒子
        var m = parseInt((times / 60) % 60); //分
        m = m < 10 ? "0" + m : m;
        minute.innerHTML = m; //把剩余的分钟给 minute 盒子
        var s = parseInt(times % 60); //秒
        s = s < 10 ? "0" + s : s;
        second.innerHTML = s; //把剩余的秒数给 second 盒子
      }
    </script>