BOM_window定时器方法和案例2_轮播图

BOM_window定时器方法：

与定时器有关的方式：

setTimeout（）：在指定的毫秒数后调用函数或计算表达式。

参数：

1.js代码或者方法对象

2.毫秒值

返回值：唯一标识，用于取消定时器

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

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

clearInterval()取消由setInterval()设置的timeout。

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>window定时器方法</title>
</head>
<body>

    <script>

        //一次性定时器
        // setTimeout("fun();",2000);
        // let id = setTimeout(fun,2000);
        // clearTimeout(id);
        function fun() {
            alert('boom');
        }

        //循环定时器
        let id = setInterval(fun,2000);
        clearInterval(id);
    </script>


</body>
</html>

案例2_轮播图：

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script>

        //修改图片
        let number = 1;
        function fun() {
            number++;
            //判断number是否大于3
            if (number > 3){
                number = 1;
            }
            //获取img对象
            let img = document.getElementById("img");
            img.src = "../img/kejidongtai.gif"+ number+".jpg";
        }

        //2.定义定时器
        setInterval(fun, 3000);

    </script>
</head>
<body>

    <img src="../img/kejifengdongtai.gif" width="100%">

</body>
</html>

程序员灯塔
转载请注明原文链接：BOM_window定时器方法和案例2_轮播图