js定时器

最新推荐文章于 2022-09-05 10:31:13 发布

kylinxjd

最新推荐文章于 2022-09-05 10:31:13 发布

阅读量153

点赞数

文章标签： js 定时器

本文链接：https://blog.csdn.net/kylinxjd/article/details/90440890

版权

js定时器有两种方式
1、setTimeout(handler, time) 单次定时
2、setInterval(handler, time) 多次定时
第一个参数是JavaScript 函数或要执行的代码, 第二个参数是等待的毫秒数
示例代码：

<!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>
    div{
        margin: 0 auto;
        width: 200px;
        height: 60px;
        text-align: center;
    }
    #div1{
        background: chartreuse;
    }
    #div2{
        background: chocolate;
    }
    #div3{
        background: cornflowerblue;
    }
    </style>
    <script>
    window.onload = function () {
        var count = null;
        var i = 0;
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');

        function myfunc() {
            alert("定时器：多次定时")
        }

        div1.onclick = function () {
            // 单次定时，3秒后弹出提示框
            // setTimeout(handler, time)handler是函数名或匿名函数，time是时间，单位毫秒
            setTimeout(function () {
                alert('定时器:单次定时')
            }, 3000);
        }
        div2.onclick = function () {
            // 多次定时，每3秒弹出一次提示框
            // 返回值用来清除时使用
            count = setInterval(myfunc, 3000);
        }

        div3.onclick = function () {
            // 清除定时器
            clearInterval(count);
            count = null;
        }
    }
    </script>
</head>
<body>
    <div>定时器练习</div>
    <div id="div1">单次定时</div>
    <div id="div2">多次定时（循环定时）</div>
    <div id="div3">清除定时</div> 
</body>
</html>