JS-04-CFANZ编程社区

Bom对象

bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力

window对象

所有的浏览器都支持window对象。它表示的浏览器窗口

window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员

甚至Dom的document也是window对象的属性之一

frameset

可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用

<frameset> 分割的标签

<frame> 标签引入其他页面

<frameset rows="20%,*">
        <frame src="hear.html" />
        
        <frameset cols="20%,*">
            <frame src="left.html" />
            <frame src="rigth.html" />
        </frameset>
</frameset>

iframe

可以把window页面进行分割，是一个框架标签，可以和body一块使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <iframe src="index.html"></iframe>
        可以书写自己的东东
    </body>
</html>

confrim确认框架

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function demo(){
                var con  = window.confirm("我这么可爱你确定要删除我吗？？？");
                
                if(con){
                    alert("算你狠！");//真正的删除了
                }else{
                    alert("我知道你还是爱我的,么么哒！");//取消
                }
            }
        </script>
    </head>
    <body>
        <button onclick="demo()">删除</button>
    </body>
</html>

时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例让时间走动，进行开始或者停止控制

<script>
            
            //设置一个时间周期,参数1：表示是一个调用的方法，参数2：表示的时间周期
             var interval_id = window.setInterval("_setTime()",1000);
            
            //页面一刷新，用户就可以看到时间，但是这个是静态的
            window.onload = function(){
                //获取id
                var _time = document.getElementById("_time");
                
                //获取当前时间
                var date = new Date();
                
                //把时间写入到span标签中
                _time.innerHTML = date.toLocaleString();
            }
            
            function _setTime(){
                //获取id
                var _time = document.getElementById("_time");
                
                //获取当前时间
                var date = new Date();
                
                //把时间写入到span标签中
                _time.innerHTML = date.toLocaleString();
            }
            
            //停止时间
            function _stopTime(){
                window.clearInterval(interval_id);//获取设置时间周期的id
            }
            //开始时间
            function _stratTime(){
                interval_id = window.setInterval("_setTime()",1000);
            }
            
        </script>
    </head>
    <body>
        <span style="color: red;" id="_time"></span>
        <input type="button" value="停止时间" onclick="_stopTime()"/>
        <input type="button" value="开始时间" onclick="_stratTime()"/>
    </body>

倒记时案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- html中有一个meta标签，可以实现页面刷新，可以看作是倒记时 -->
        <meta http-equiv="refresh" content="10;url=https://www.baidu.com">
        <title></title>
        
        <!-- 通过js配合meta标签，把这个倒记时的时间，显示给用户，效果是时间递减 -->
        <script>
            var time = 10;
            window.onload = function(){
                window.setInterval("setTime()",1000);
            }
            function setTime(){
                document.getElementById("spanid").innerHTML = time;
                time--;
            }
        </script>
        
    </head>
    <body>
        
        <center>
            <span style="font-size: 78px; color:orange; text-align: center;"  id="spanid"></span>
             秒后跳转到<a href="https://www.baidu.com"> 百度</a>
        </center>
        <div align="center">
            <img src="img/404.jpg" />
        </div>
        
    </body>
</html>

关闭，打开浏览器

close()	关闭浏览器
open()	打开浏览器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function open_Browser(){
                //打开浏览器窗口
                window.open("04-让时间动起来.html");
            }
        </script>
    </head>
    <body>
        <input type="button" value="打开浏览器" onclick="open_Browser()" />
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //关闭浏览器
            function close_Browser(){
                window.close();
            }
        </script>
    </head>
    <body>
    <input type="button" value="关闭浏览器" onclick="close_Browser()" />
    </body>
</html>

history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载hitory列表中的某一个具体的页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        我是01html
        <a href="02.html">去02html</a>
    </body>
</html>

<script>
            //返回上一页
            function backPage(){
                history.back();
            }
            
            //跳到下一页
            function forwardPage(){
                history.forward();
            }
            
            //指定跳转
            function goPage(){
                /* 
                    负数是指定上一个页（左边）  
                    正数是指定下一个页（右边）  
                 */
                history.go(1);
            }
        </script>
    </head>
    <body>
        
        <input type="button" value="返回上一页" onclick="backPage()" />
        <input type="button" value="跳到下一页" onclick="forwardPage()" />
        <input type="button" value="指定跳转" onclick="goPage()" />
        
        我是02html
        <a href="03.html">去03html</a>
    </body>

<script>
            //指定跳转
            function goPage(){
                history.go(-2);//跳转到01
            }
        </script>
    </head>
    <body>
        <input type="button" value="指定跳转" onclick="goPage()" />
        我是03html
        <a href="01.html">去01html</a>
    </body>