632 BOM_wWindow_定时器方法 and 633 案例轮播图

 Window:窗口对象
　　　　1.创建            

　　　　2.方法
　　　　　　与定时器有关的方式

　　　　　　 setTimeout()在指定的毫秒数后调用函数或计算机表达式

　　　　　　　　参数；

　　　　　　　　　　js代码或者是方法对象

　　　　　　　　　　毫秒值

　　　　　　返回值；唯一标识用于取消定时器的

　　　　　　 clearTimeout()取消由setTimeout方法设置的timeout

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

　　　　　　clearInterval()取消由setInterval设置的timeout

　　　　3.属性

　　　　4.特点

 　　　　　　window对象不需要创建可以之间使用window使用.window.方法名();

　　　　　　window引用可以省略. 方法名();

    <script>
//一次性的定时器
        // setTimeout("alert('我说你小子瞅啥呢');",3000);
        //创建方法调用方法去实现
        function fun() {
            //展示的内容
            alert('你又瞅啥');
        }
        //循环方法去执行并设置毫秒值
        // setInterval(fun,1000);
        //反回一个id在用方法调用终止
        // let id = setInterval(fun,1000);
        // 终止定时器
        // clearTimeout(id)


        // 终止定时器
        // let id = setTimeout(fun,2000);
        //调用方法进行终止
        // clearTimeout(id)

    </script>

 

轮播图——案例
    分析： 

　　1.在页面上用img标签展示图片

　　2.定义一个方法修改对象的src属性

　　3.定义一个定时器，每隔三秒定义一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            分析：
                1.在页面上用img标签展示图片
                2.定义一个方法修改对象的src属性
                3.定义一个定时器，每隔三秒定义一次
        */
        // 修改图片crs属性
        // 先定义一个变量
        var number = 1 ;
        //定义方法
        function fun() {
            //运行一次加一
            number++;
            // 判断number是否大于三
            if (number > 3) {
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            //修改属性
            img.src="img/banner_"+number+".jpg";
        }

        //定义定时器
        setInterval(fun,2000);

    </script>
</head>
<body>
            <!--导入图片  并设置大小-->
        <img id="img" src = "img/banner_1.jpg" width ="100%">
</body>
</html>

 

posted @ 2022-10-27 10:49  ja不会va  阅读(62)  评论(0)    收藏  举报