定时器

最新推荐文章于 2024-07-05 16:41:23 发布

7束QW

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量215

点赞数

分类专栏：定时器文章标签： javascript css html

本文链接：https://blog.csdn.net/v8min/article/details/111145719

版权

定时器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 设置定时器

1.setTimeout()
到达间隔时间之后，只调用一次回调函数
语法：setTimeout(回调函数，间隔时间)
时间以毫秒为单位
返回这个定时器的标识符是数字类型

CSS代码：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
            /* display: none; */
        }
    </style>

</head>

<body>
    <input type="button" value="click" id="btn">
    <div class="box" id="box">10</div>

JS代码：

var btn = document.getElementById('btn')
        var box = document.getElementById('box')
            //点击按钮3秒之后会出现盒子
        btn.onclick = setTimeout(function() { //只执行一次
                box.style.display = 'block'
            }, 3000)

2.setInterval()
每隔一个间隔时间,就调用一次回调函数
语法：setInterval(回调函数，间隔时间)
时间以毫秒为单位
返回这个定时器的唯一标识符是数字类型

CSS代码：

<input type="button" value="click" id="btn">

JS代码：

<script>
        //获取元素
        var btn = document.getElementById('btn')
            //点击按钮  每隔3秒会出输出一次内容
        btn.onclick = setInterval(function() { //可以执行多次
            console.log('阿诗玛');
        }, 3000)

2.清楚定时器

1.clearTimeout()
清楚setTImeout设置的定时器
语法：clearTimeout（定时器的标识符）
2.clearInterval()
清楚setInterval设置的定时器
语法：clearInterval(定时器的标识符)

CSS代码：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
            /* display: none; */
        }
    </style>

JS代码：

<script>
        //获取元素
        var btn = document.getElementById('btn')
        var box = document.getElementById('box')
         btn.onclick = function() {
            //定时器标识符
            var timerID = setInterval(function() {
                //让内容里面的数字自减
                box.innerText--
                    //等于0的时候 清除定时器
                    if (box.innerText == 0) {
                        //清除定时器  参数是定时器标识符
                        clearInterval(timerID)
                    }

            }, 1000)
        }

总结：
设置定时器：setTimeout() （只执行一次）和setInterval()（可以执行多次）
清除定时器：clearimeout()和clearInterval()

7束QW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器

1 设置定时器1.setTimeout()到达间隔时间之后，只调用一次回调函数语法：setTimeout(回调函数，间隔时间)时间以毫秒为单位返回这个定时器的标识符是数字类型CSS代码： <style> * { margin: 0; padding: 0; } .box { width: 200px; height:
复制链接

扫一扫