js定时器

最新推荐文章于 2025-09-03 16:51:19 发布

原创最新推荐文章于 2025-09-03 16:51:19 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Html+css+js项目专栏收录该内容

31 篇文章

订阅专栏

博客介绍了JavaScript中定时器相关函数。setInterval()按指定周期调用函数，setTimeout()在指定毫秒数后调用函数，clearInterval()取消setInterval()设置的timeout，clearTimeout()取消setTimeout()设置的timeout，还给出设置定时器从1开始逐渐变大的详细代码。

知识点：

setInterval（）按照指定的周期（以毫秒）来调用函数或计算表达式

setTimeout（）再去指定的毫秒数调用函数或计算表达式

clearInterval（）取消有setInterval（）设置的timeout

clearTimeout（）取消由setTimeout（）方法设置的timeout

设置定时器从1开始逐渐变大，详细代码：

<!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>
    <script>
        window.onload = function () {
            //获取count
            /* var count = document.getElementById("count");
            //是count中的内容自动切换
            //js中的代码执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次可以是用定时调用
            for (var i = 0; i < 10; i++){
                count.innerHTML = i;
            } */


            /*
              setInteval()定时调用
              可以将一个函数，每隔一段时间被调用一次
              参数：
                1回调函数，该函数每隔一段时间被调用一次
                2每次调用时间间隔单位是毫秒
              返回值：
               返回一个Number类型的数据
               这个数据用来作为定时器的唯一标识
            */
            var num = 1;
            var timer = setInterval(function () {
                count.innerHTML = num++;
                if (num == 11) {
                    clearInterval(timer);
                }
            }, 1000);

            //clearInterval()可以用来关闭定时器，方法中需要一个定时器的标识作为参数，这样将关闭对应的定时器
        };
    </script>
</head>

<body>
    <h1 id="count"></h1>
</body>

</html>

结果：