Bom——定时器

定时器

定时器概念

1. setTimeout(调用函数/函数名，[延迟的毫秒数])

setTimeout又称为回调函数callback，上一件事干完再回头调用的意思，只调用一次

2. setInterval(回调函数，[间隔的毫秒数])。每隔设定的时间运行一次函数，会重复调用

案例

案例1：5秒关闭广告

效果：图片、文字过5秒后消失。

核心思想

1. 设置定时器，当过了5秒后，被选中的事件源设置display = 'none' 。
2. 由于该效果只使用一次，因此设置setTimeout。

代码

javascript部分

        window.addEventListener('load', function() {
            var img = document.querySelector('img');
            setTimeout(function() {
                img.style.display = 'none';
            }, 5000)
        })

案例2：5秒跳转页面

效果：静待5秒后自动跳转页面，在等待的过程中屏幕会显示相应的倒计时。

知识点补充：location对象

1. 含义：用于获取或设置窗体的URL，并解析URL
2. location对象的属性：href——获取或设置整个url

核心思路

1. 设置一个变量 timer ，timer 值为5
2. 设置一个定时器，每隔1秒就启动。由于是重复调用，因此选择 setInterval
3. 设置一个 if 条件判断，如果 timer 为0（即时间到了）则跳转页面；否则显示 timer 并让其自减1

代码

javascript部分

        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            var timer = 5; // 先设置一个初始全局变量作为倒计时秒数
            div.innerHTML = '你将在5秒后跳转页面';
            setInterval(function() {
                if (timer == 0) { // 如果秒数为0则跳转页面
                    location.href = 'http://www.itcast.cn';
                } else { // 否则自减一
                    div.innerHTML = '你将在' + timer + '秒后跳转页面';
                    timer--;
                }
            }, 1000);
        })

案例3：60秒按钮不可用

效果：按钮点击之后，按钮不可用，并进入倒计时，当倒计时结束后恢复可用状态。

核心思路

1. 设置一个变量i用于计时，i等于60
2. 当按钮被点击时按钮被禁用 disabled = true
3. 设置定时器，每隔1秒就启动。由于是重复调用，因此选择 setInterval
4. 判断i是否为0，如果i等于0则说明倒计时结束，取消按钮禁用，清除定时器，并重新为i赋值为60；否则i自减1，按钮文本不断变化

代码

html部分

    <input type="text">
    <button class="send">发送</button>

css部分

        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
        
        input {
            float: left;
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            outline: none;
        }
        
        button {
            float: left;
            width: 100px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            background-color: #ccc;
            color: #fff;
        }

javascript部分

        var btn = document.querySelector('button');
        var i = 60;
        btn.addEventListener('click', function() {
            // 按钮被点击则禁用按钮
            btn.disabled = 'true'; // 这里的btn可以改为this
            var timer = setInterval(function() {
                if (i == 0) {
                    // 当变量为0，说明时间到了，把按钮恢复原样，停止计时器
                    btn.style.disabled = 'false'; // 这里的btn不可以改为this
                    btn.innerHTML = '发送';
                    clearInterval(timer);
                    i = 60;
                } else {
                    // 如果时间不为0，则启动计时器，按钮秒数不断变化，减一
                    btn.innerHTML = '请等待' + i + '秒';
                    i--;
                }
            }, 1000);
        })

案例4：倒计时

效果

核心思想

1. 设置三个盒子，分别存放时、分、秒
2. 设置三个变量，分别为时、分、秒
3. 利用Date函数获取电脑当前时间，再设置结束时间，两者相减，再用公式进行计算即可得到时、分、秒
4. 设置定时器setInterval，每隔一秒调用一次
5. 注意：由于定时器隔1秒才运作，因此页面一开始加载的时候会有1秒的延迟，解决方法为把Date函数封装，然后先调用一次，再运行定时器（即写在定时器上面）

代码

html部分

    <span class="hour"></span>
    <span class="minute"></span>
    <span class="second"></span>

css部分

       span {
            display: inline-block;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #000;
            color: #fff;
            font-size: 25px;
        }

javascript部分

        window.addEventListener('load', function() {
            var hh = document.querySelector('.hour');
            var mm = document.querySelector('.minute');
            var ss = document.querySelector('.second');

            function timeDown() {
                var nowTime = +new Date(); // 获取电脑目前的时间
                var downTime = +new Date('2021-7-23 12:00:00'); // 获取想要结束的时间
                var times = (downTime - nowTime) / 1000;
                var h = parseInt(times / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                hh.innerHTML = h;
                mm.innerHTML = m;
                ss.innerHTML = s;
            }
            timeDown(); // 因此用封装函数的方式，先调用一次函数（写在计时器上方）
            setInterval(timeDown, 1000); // 由于第一次刷新页面也会有间隔，导致时间盒子那里有空白
        })