# 定时器 setTimeout和setInterval本文已参与「新人创作礼」活动，一起开启掘金创作之路模拟页面广告

本文已参与「新人创作礼」活动，一起开启掘金创作之路

模拟页面广告几秒后自动关闭

<body>
<img src="images/phone.png" alt="">
<script>
    var pic = document.querySelector('img');
    var callback = setTimeout(function () {
        pic.style.display = 'none';
    }, 2000);
</script>
</body>

//模拟倒计时
<style>
    div {
        width: 400px;
        height: 60px;
        font-size: 40px;
        color: #4c4c4c;
        margin-top: 10px;
    }

    span {
        width: 60px;
        height: 60px;
        background-color: #4c4c4c;
        color: #fff;
    }
</style>

<body>
<button>开启定时器</button>
<button>停止定时器</button>
<div>
    <span></span>&nbsp:&nbsp
    <span></span>&nbsp:&nbsp
    <span></span>
</div>

模拟页面倒计时

<script>
    var btns = document.querySelectorAll('button');
    deadline = new Date('2020-03-22 23:59:59');
    var spans = document.querySelectorAll('span');
    var countDown = function () {
        var timeNow = new Date();
        var timer = (deadline - timeNow) / 1000;
        var arr = [parseInt(timer / 60 / 60 % 24), parseInt(timer / 60 % 60), parseInt(timer % 60)];
        for (i = 0; i < spans.length; i++) {
            if (arr[i] < 10) {
                arr[i] = '0' + arr[i];
            }
            spans[i].innerHTML = arr[i];
        }
    }
    //注意需先调用一次，否则页面第一次刷新也会间隔1000ms
    countDown();
    var startCount = null;
    btns[0].addEventListener('click', function (ev) {
        startCount = setInterval(countDown, 1000);
    });
    btns[1].addEventListener('click', function () {
        clearInterval(startCount);
    });
</script>
</body>

模拟短信发送倒计时

<body>
<button>发送</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        var timer = 3;
        btn.disabled = true;
        var timeCount = setInterval(function () {
            console.log(timer);
            if (timer == 0) {
                clearInterval(timeCount);
                btn.disabled = false;
                btn.innerHTML = '发送';
                timer = 3;
            } else {
                btn.innerHTML = '' + timer + '秒后再发送';
                timer--;
            }
        }, 1000);
    })
</script>
</body>

3、模拟短信验证码发送按钮点一次后3秒才可点

<body>
<button>发送</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        var timer = 3;
        btn.disabled = true;
        var timeCount = setInterval(function () {
            console.log(timer);
            if (timer == 0) {
                clearInterval(timeCount);
                btn.disabled = false;
                btn.innerHTML = '发送';
                timer = 3;
            } else {
                btn.innerHTML = '' + timer + '秒后再发送';
                timer--;
            }
        }, 1000);
    })
</script>
</body>

4、模拟Error页面5秒后自动跳转

<body>
<div></div>
<script>
    var box = document.querySelector('div');
    var timer = 5;
    setInterval(function () {
        if (timer >= 0) {
            box.innerHTML = '将在' + timer + '秒后跳转至百度首页！';
            timer--;
        } else {
            location.href = 'http://www.baidu.com';
        }
    }, 1000)
</script>
</body>