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

BOM_window定时器方法

3、与定时器有关的方法
    setTimeout()   在指定的毫秒数后调用函数或计算表达式。
        参数：
            1、js代码或者方法对象
            2、毫秒值
        返回值：唯一标识，用来取消定时器

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

    setInterval()  按照指定的周期（以毫秒计）来调用函数或计算表达式。
    clearInterval()    取消由setInterval()设置的timeout。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">
<script>
    /*
     Window：窗口对象
    　　1、创建
    　　2、方法
    　　　　1、与弹出框有关的方法
    　　　　　　alert() 显示带有一段消息和一个确认按钮的警告框。
    　　　　　　confirm() 显示带有一段信息以及确认按钮和取消按钮的对话框
    　　　　　　　　如果用户点击确定按钮，则方法返回true
    　　　　　　　　如果用户点击取消按钮，则方法返回false
    　　　　　　prompt() 显示可提示用户输入的对话框
    　　　　　　　　返回值：获取用户输入的值
            2、与打开关闭有关的方法
                close() 关闭浏览器窗口
                    谁调用colse方法，就关谁
                open() 打开一个新的浏览器窗口
                    返回新的window对象
            3、与定时器有关的方法
                setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                    参数：
                        1、js代码或者方法对象
                        2、毫秒值
                    返回值：唯一标识，用来取消定时器

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

                setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
                clearInterval()    取消由setInterval()设置的timeout。
    　　3、属性
    　　4、特点
    　　　　1、Window对象不需要创建可以直接使用。window.方法名();
    　　　　2、window引用可以省略，方法名();
     */


    //一次性定时器
    // setTimeout("alert('时间到');",2000)
    var id = setTimeout(f,2000)
    clearTimeout(id);
    function f() {
        alert("时间到")
    }

    var id1 =setInterval(f,2000);
    clearInterval(id1);

</script>
</body>
</html>

 










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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="img/banner_1.jpg" width="100%" id="image">

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

        //修改图片src属性
        var number = 1;
        function fun() {
            number++;
            if (number>3){
                number=1;
            }
            //获取image对象
            var image = document.getElementById("image");
            image.src = "img/banner_"+number+".jpg";
        }
        //定义定时器
        setInterval(fun,1000)
    </script>
</body>
</html>


posted @ 2022-08-03 14:51  xjw12345  阅读(70)  评论(0)    收藏  举报