BOM中的定时器setInterval()和setTimeout()详解

最新推荐文章于 2022-07-28 22:14:44 发布

杏黄的三叶草

最新推荐文章于 2022-07-28 22:14:44 发布

阅读量421

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104287176

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

定时器

   /*
    * 定时器:
    * window.setInterval(参数1，参数2);
    * 参数1:函数
    * 参数2:时间---毫秒---1000毫秒--1秒
    * 返回值就是定时器的id值
    * 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
    * 返回值就是定时器的id值
    * 停止定时器:
    * window.clearInterval(timeId);
    * 参数:要清理的定时器的id值
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>
   var timeId=window.setInterval(function () {
        alert("word");
    },2111);
   document.getElementById("btn").onclick = function () {
       //点击按钮,停止定时器
       //参数:要清理的定时的id的值
       window.clearInterval(timeId);
   };
</script>
</body>
</html>

案例:图片自由摆动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
    <style>
        #dv{
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="摆动" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
    <img src="../../image/1.gif" alt=""/>
    <img src="../../image/2.gif" alt=""/>
</div>
<script>
    var timeId;//全局变量
    my$("btn1").onclick = function () {
        timeId= setInterval(function () {
            //随机数
            var x = parseInt(Math.random() * 100 + 1);
            var y = parseInt(Math.random() * 100 + 1);
            //设置元素的left和top属性值
            my$("dv").style.left = x + "px";
            my$("dv").style.top = y + "px";
        }, 100);
    };

    my$("btn2").onclick=function () {
        window.clearInterval(timeId);
    };
</script>
</body>
</html>

一次性的定时器(只执行一次)

/*
    * 参数返回值和前面的定时器一样，不过这个定时器是一次性的
    * window.setTimeout(函数,时间);
    * window.clearTimeout(定时器的ID名)
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //页面加载完毕后，这个事件才会执行
    window.onload=function () {
        //一次性的定时器
        var timeId=window.setTimeout(function () {
            alert("您好");
        },1000);
        //点击这个按钮,停止这个一次性的定时器(清除缓存)
        document.getElementById("btn").onclick=function () {
            window.clearTimeout(timeId);
        };
    };

</script>
<input type="button" value="停下" id="btn"/>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BOM中的定时器setInterval()和setTimeout()详解

定时器 /* * 定时器: * window.setInterval(参数1，参数2); * 参数1:函数 * 参数2:时间---毫秒---1000毫秒--1秒 * 返回值就是定时器的id值 * 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数..... * 返回值就是定时器的id值 * 停止定时器:...
复制链接

扫一扫