定时器

  • setTimeout(); 延迟执行

  • setInterval(); 循环执行

  • clearTimeout(); 清除延迟执行的定时器

  • clearInterval(); 清除循环执行的定时器

使用

setTimeout(function() {
    console.log("延迟了5s才执行");
}, 5000);

// 开启一个循环定时器, 同时返回该定时器id, 赋值给变量timer
var timer = setInterval(function() {
    console.log("每隔1s执行一次");
}, 1000);

// 清除定时器时,需要使用定时器id
btn.onclick = function() {
    clearInterval(timer);
};

倒计时案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            h1 {
                width: 250px;
                margin: 100px auto 50px auto;
            }

            .item {
                width: 500px;
                height: 50px;
                margin: 0 auto;
                text-align: center;
                font-size: 30px;
                color: orange;
            }

            strong {
                background-color: orange;
                padding: 0 10px;
                color: #fff;
                border-radius: 4px;
            }
        </style>
    </head>

    <body>
        <h1>距离光棍节,还有</h1>
        <div class="item">
            <span><span class="day">00</span></span>
            <strong><span class="hour">00</span></strong>
            <strong><span class="min">00</span></strong>
            <strong><span class="second">00</span></strong>
        </div>

        <script>
            var endTime = new Date("2019-11-11");
            var dayEl = document.querySelector(".day");
            var hourEl = document.querySelector(".hour");
            var minEl = document.querySelector(".min");
            var secondEl = document.querySelector(".second");
            setInterval(function() {
                // 获取当前时间
                var nowTime = new Date();
                var cha = endTime - nowTime; // 获取相差的毫秒数
                // console.log(cha);
                // 转换  天  时  分  秒
                var DAY_MS = 1000 * 60 * 60 * 24;
                var HOUR_MS = 1000 * 60 * 60;
                var MIN_MS = 1000 * 60;
                var SECOND_MS = 1000;
                var day = Math.floor(cha / DAY_MS);
                console.log(day);
                var hour = Math.floor((cha % DAY_MS) / HOUR_MS);
                var min = Math.floor((cha % HOUR_MS) / MIN_MS);
                var second = Math.floor((cha % MIN_MS) / SECOND_MS);
                dayEl.innerText = wrap(day);
                hourEl.innerText = wrap(hour);
                minEl.innerText = wrap(min);
                secondEl.innerText = wrap(second);
            }, 1000);

            function wrap(num) {
                return num < 10 ? "0" + num : num;
            }
        </script>
    </body>
</html>

短信验证码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button>发送</button>

    <script>
        var btn = document.querySelector('button');
        btn.onclick = function () {
            var count = 5;
            btn.disabled = true;
            btn.innerText = count + 's';
            var timer = setInterval(function () {
                if (count === 1) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerText = '发送';
                } else {
                    count--;
                    btn.innerText = count + 's';
                }

            }, 1000);
        }
    </script>
</body>

</html>
文档更新时间: 2021-10-18 14:18   作者:张老师