BOM_Window_定时器方法以及案例_轮播图

BOM_Window_定时器方法

与定时器有关的方法

　　setTimeout()： 在指定的毫秒数后调用函数或计算表达式。
　　　　参数：
　　　　　　1.js代码或者方法对象
　　　　　　2.毫秒值
　　　　返回值：唯一标识，用于取消定时器
　　clearTimeout() 取消由 setTimeout() 方法设置的 timeout。


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

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

 

    <script>
        /*
            Window：窗口对象
                1.创建
                2.方法
                    1.与弹出框有关的方法
                        alert()：显示带有一段信息和一个确定按钮的警告框
                        confirm():显示带有一段信息以及确定按钮和取消按钮的对话框
                            返回值：
                                确定：返回true
                                取消：返回false
                        prompt()：显示可提示用户输入的对话框
                            返回值：获取用户输入的值
                    2.与打开和关闭有关的方法
                        close()：关闭浏览器窗口
                            谁调用close,close就关闭谁
                        open()：打开一个新浏览器窗口
                            返回新的Window对象
                    3.与计时器有关的方法
                        　　setTimeout()： 在指定的毫秒数后调用函数或计算表达式。
                                参数：
                                        1.js代码或者方法对象
                                        2.毫秒值
                                返回值：唯一标识，用于取消定时器
                        　　clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

                        　　setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
                        　　clearInterval() 取消由 setInterval() 设置的 timeout。

                    3.属性

                    4.特点
                        Window对象不需要创建可以直接使用 Window使用：window.方法名();
                        window引用可以省略  方法名()：

        //一次性定时器
        let id = setTimeout(fun,2000);
        clearTimeout(id);//取消定时器
        function fun() {
            alert("bububu~~");
        }
        //循环定时器
        let id1 = setInterval(fun,2000);
        clearInterval(id1);//取消循环定时器
    </script>

 

 

案例_轮播图

分析：
　　1.在页面上使用img标签展示图片
　　2.定义一个方法，修改图片对象的src属性
　　3.定义一个定时器，每隔3秒调用方法一次

<body>
    <div style="text-align: center; margin-top: 300px">
        <img id="img" src="img/jiangxuan_1.jpg" alt="图片找不到了" style="width: 400px">
    </div>
    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次
         */

        //修改图片src属性
        var number = 1;
        function fun() {
            //加载
            number++;
            //判断
            if (number > 3){

                number = 1;
            }

            //获取img对象
            let img = document.getElementById("img");

            img.src = "img/jiangxuan_"+number+".jpg";
        }

        //定义定时器
        setInterval(fun,3000);
    </script>
</body>

 

posted @ 2022-11-18 15:26  monkey大佬  阅读(34)  评论(0)    收藏  举报