javascript倒计时案例 

javascrip倒计时案例

可执行代码如下：
<!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>
        span {
            display: inline-block;
            width: 60px;
            height: 40px;
            background-color: black;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        <span class='hour'>1</span>
        <span class='minute'>2</span>
        <span class='second'>3</span>
    </div>
    <script>
        //倒计时程序
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-01-18 18: 00: 00');
        countDown(); //先调用这个函数，防止第一次刷新空白
        setInterval(countDown, 1000);
        //函数写了具体的参数名，调用的时候就得把参数写上
        function countDown() {
            //获取当前时间的总的毫秒数
            var nowTime = +new Date();
            var leaveTime = (inputTime - nowTime) / 1000;
            //获取小时数，关键操作：取余
            var h = parseInt(leaveTime / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            //获取分钟数，关键操作：取余
            var m = parseInt(leaveTime / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            //获取秒钟数，关键操作：取余
            var s = parseInt(leaveTime % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
        //开启定时器
    </script>
</body>
</html>

 

注意点：

函数 function countDown() 括号里面的参数，是否填写，影响到调用的时候；

我在countDown()括号里面写 inputHTML之后就无法启动定时器了。 

怀疑原因：

    声明提前 和 函数格式，就目前的我掌握的知识还无法解答这个疑问，还迎各位在评论区发表自己见解。

 

 

posted @ 2022-01-19 09:18  甜酒1996  阅读(71)  评论(0)    收藏  举报