46-1 JavaScript的对象-host object-BOM

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。从而使 JavaScript 有能力与浏览器“对话”。

一、 windows对象

所有浏览器都支持 window 对象。从概念上讲，一个html文档对应一个window对象；从功能上讲，windows对象是用来控制浏览器窗口的；从使用上讲，window对象不需要创建对象,直接使用即可。

windows对象的方法：

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

1、alert()

显示带有一段消息和一个确认按钮的警告框。

window.alert("123");      // window是一个全局变量，可简写为alert("123")。以下同理

2、confirm()

显示带有一段消息和“确认”按钮、“取消”按钮的对话框。“确定”对应返回值为true，反之false，可通过变量接收。

var ret=confirm("确定删除吗？");

3、prompt()

显示可提示用户输入的对话框。

var ret=prompt("请输入:", "hehe");    // 返回值是用户输入的文本内容，可通过变量接收。参数1: 提示信息. 参数2:输入框的默认值.

var num = Math.round(Math.random()*100);
function acceptInput() {
//2.让用户输入(prompt)    并接受 用户输入结果
    var userNum = prompt("请输入一个0~100之间的数字!", "0");
//3.将用户输入的值与 随机数进行比较
    if (isNaN(+userNum)) {
        //用户输入的无效(重复2,3步骤)
        alert("请输入有效数字!");
        acceptInput();
    }
    else if (userNum > num) {
        //大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
        alert("您输入的大了!");
        acceptInput();
    } else if (userNum < num) {
        //小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
        alert("您输入的小了!");
        acceptInput();
    } else {
        //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
        var result = confirm("恭喜您!答对了,是否继续游戏?");
        if (result) {
            //是 ==> 重复123步骤.
            num = Math.round(Math.random() * 100);
            acceptInput();
        } else {
            //否==> 关闭窗口(close方法).
            close();
        }
    }
}

acceptInput();

示例：猜数字

4、 open() 和 close()

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

open("http://www.baidu.com");         // 打开一个新的窗口并进入指定网址

// 参数1:啥都不填,只打开一个新窗口.  参数2:填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100');   /// 新打开一个宽为200 高为100的窗口

　　close() 关闭浏览器窗口。

close();    //将当前文档窗口关闭.

5、setInterval 和 clearInterval

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="clock" style="width:350px">
<input type="button" value="begin" onclick="begin_click()">
<input type="button" value="end" onclick="end_click()">


<script>

    function begin(){
        var stime=getTime();
        var ret=document.getElementById("clock");     // 选择到id为“clock”的标签
        ret.value=stime;
    }

    var ID;                                           // 不加这句，ID是局部变量，在 begin_click函数外无法使用

    function begin_click(){
        if (ID==undefined){                           // 若ID有值，说明有正在进行的setInterval
            begin();                                  // 不加这一句会点击后等一秒钟后才显示出来
            ID=setInterval(begin, 1000);              // 定时器，每隔1000ms执行一次
        }
    }

    function end_click(){
        clearInterval(ID);                            // 根据名字去关定时器
        ID=undefined;                                 // 这句很必要，否则程序有无法关闭的bug
    }


    function getTime(){
        var date_obj = new Date();
        return date_obj;
    }

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

6、setTimeout 和 clearTimeout

1、可以通过 setTimeout 函数设置定时器，让指定的代码在指定的时间后运行。如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout()。
2、clearTimeout()用于重置js定时器，如果你希望阻止setTimeout的运行，就可以使用clearTimeout方法。

var ID = setTimeout(abc,2000);  //设定在2000毫秒后执行abc函数,且只执行一次abc函数就完事了.
            clearTimeout(ID);   //在到达2000毫秒时间点执行abc函数前，反悔了，取消执行abc函数的设定
    function abc(){
        alert('aaa');
    }

7、 scrollTo()

把内容滚动到指定的坐标。

二、history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

功能和浏览器的前进后退按钮相同。用于长页面，灵活的给到用户前进、后退按钮，以提高用户体验。

1、history对象的属性

history.length       // 返回浏览器历史列表中的 URL 数量。

2、history对象的方法

history.back()       // 加载 history 列表中的前一个 URL。
history.forward()    // 加载 history 列表中的下一个 URL。
history.go(n)        // 加载 history 列表中的某个具体页面。n=1时，等价于forward方法；n=-1时，等价于back方法；n=0时，不前进也不后退。

如：

<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>

三、location对象

<body>
<input type="button" value="重载" onclick="location.reload();">                      <!--起到刷新本页面的功能-->
<input type="button" value="转到" onclick="location.href='http://www.baidu.com'">    <!--起到跳转的功能-->
</body>

参考：

http://www.cnblogs.com/yuanchenqi/articles/5980312.html

posted @ 2017-09-07 21:56 seaidler 阅读(107) 评论(0) 收藏举报

刷新页面返回顶部