仿京东（线上商城）倒计时——date日期对象、定时器的运用-CFANZ编程社区

仿京东（线上商城）倒计时——date日期对象、定时器的运用
<!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>
        * {
          margin: 0;
          padding: 0;
        }
 
        .hour {
          left: 20px;
        }
    
        .minute {
          left: 80px;
        }

        .second {
          left: 140px;
        }
    
        .hour,
        .minute,
        .second {
          position: absolute;
          top: 200px;
          color: #fff;
          font-weight: 800;
          font-size: 20px;
          text-align: center;
          line-height: 40px;
          width: 40px;
          height: 40px;
          background: black;
        }
    
      </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
            // 获取元素
        var hour = document.querySelector('.hour');     // 小时盒子
        var minute = document.querySelector('.minute'); // 分钟盒子
        var second = document.querySelector('.second'); // 秒数盒子

        var inputTime = +new Date('2022-4-2 23:00:00'); // 用户输入的时间总毫秒数

        countDown();       // 先调用一次函数，防止刷新页面时空白
       
        setInterval(countDown,1000);    // 开启定时器

        function countDown() {
            var nowTime = +new Date();              // 返回当前时间总毫秒数
            var tiems = (inputTime-nowTime)/1000;  // times是剩余时间的总秒数

            var h = parseInt(tiems/60/60%24);     // 时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(tiems/60%60);       // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(tiems%60);        // 秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>
</html>
0 条评论