Window窗口对象和定时器方法

Window窗口对象

打开关闭有关的方法：

close() 关闭浏览器窗口
- 谁调用我我关谁
open() 打开一个新的浏览器窗口
- 放回新的Window对象

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BOM打开关闭方法</title>
        
    </head>
    <body>
        <input id="openBtn" type="button" value="打开窗口">
        <input id="closeBtn" type="button" value="关闭窗口">
        <script>
            
            
            //打开新窗口
            var openBtn = document.getElementById("openBtn");
            var newWindow;
            openBtn.onclick=function(){
                //打开新窗口
                newWindow = open("https://www.baidu.com");
            }
            
            //关闭新窗口
            var closeBtn = document.getElementById("closeBtn");
            closeBtn.onclick=function(){
                //关闭新窗口
                newWindow.close("https://www.baidu.com");
            }
            
            
            
        </script>
    </body>
</html>

运行结果

打开窗口

关闭窗口

定时器方法

SetTimeout():在指定的毫秒数后调用函数或计算表达式
- 参数
  - js代码或者方法对象
  - 毫秒值
- 返回值：唯一标识用于取消定时器
clearTimeout():取消由setTimeout()方法设置的timeout
setInteervar():按照指定的周期（以毫秒计）来调用函数或计算表达式
ClearInterval():取消由setInterval()设置的timeout

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定时器</title>
        <script>
            
            var id=setTimeout(fun,2000);
            clearTimeout(id);
            function fun(){
                alert("boom~~");
            }
            //循环定时器
            setInterval(fun,4000);
        </script>
        
    </head>
    <body>
    </body>
</html>

运行结果

案例-轮播图

分析：

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

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

3.定义一个定时器每隔3秒调用方法一次

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function fun(){
                
                var img=document.getElementById("img");
                img.src="img/图片.jpeg";
                
            }
            setInterval(fun,3000);
            
            function fun1(){
                
                var img=document.getElementById("img");
                img.src="img/QQ截图20220802162029.png";
                
            }
            setInterval(fun1,6000);
        </script>
    </head>
    <body>
        <img src="img/QQ截图20220802162029.png" id="img" width="100%">
    </body>
</html>