定时器的使用

最新推荐文章于 2022-09-21 09:52:24 发布

传说中的懿痕

最新推荐文章于 2022-09-21 09:52:24 发布

阅读量161

点赞数

分类专栏： BOM 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/yihen0214/article/details/120719261

版权

BOM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定时器

文章目录

定时器

window对象给我们提供了两个非常好用的方法——定时器

setTimeout()
setInterval()

setTimeout()定时器

window.setTimeout(调用函数,延迟毫秒数);
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

注意：

window可以省略
调用函数可以直接写函数，也可以写函数名，或采用字符串’函数名()’,第三种不推荐
延时的毫秒数默认为0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

停止setTimeout()定时器

window.clearTimeout(timeoutID)
该方法取消先前通过调用setTimeout()建立的定时器

注意：window可以省略

案例：5秒后自动关闭广告

<!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>
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #008c8c;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>广告3秒后关闭</div>
    <script>
        let div=document.querySelector('div');
        setTimeout(function(){
            div.style.display='none';
        },3000)
    </script>
</body>
</html>

setInterval()定时器

window.setInterval(回调函数,间隔的毫秒数)
该方法用于重复调用一个函数，每隔这个时间间隔就会去调用一次回调函数

注意：

window可以省略
调用函数可以直接写函数，也可以写函数名，或者采用字符串 '函数名()'三种形式，第三种不推荐
延迟的毫秒数默认为0，如果写，必须是毫米。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

停止 setInterval()定时器

window.clearInterval(intervalID);
该方法取消了先前通过调用setInterval()建立的定时器

注意：

window可以省略
里面的参数就是定时器的标识符

案例：倒计时效果

<!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>
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #008c8c;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>倒计时<span>5</span>秒</div>
    <script>
        let div=document.querySelector('div');
        let span=div.querySelector('span');
        let time1= setInterval(function(){
            span.innerHTML=span.innerHTML-1;
            if(span.innerHTML<=0){
                clearInterval(time1);
            }
        },1000)
    </script>
</body>
</html>

传说中的懿痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
定时器的使用

定时器文章目录定时器setTimeout()定时器停止setTimeout()定时器setInterval()定时器停止 setInterval()定时器window对象给我们提供了两个非常好用的方法——定时器setTimeout()setInterval()setTimeout()定时器window.setTimeout(调用函数,延迟毫秒数);setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数注意：window可以省略调用函数可以直接写函数，也可
复制链接

扫一扫