BOM对象

 BOM对象

Window对象

    所有浏览器都支持window对象

    概念上：一个html文档对应一个window对象

    功能上：控制浏览器窗口的

    使用上：window对象不需要创建对象，直接使用即可

Window 对象方法

alert()                              显示带有一段消息和一个确认按钮的警告框。
confirm()                            显示带有一段消息以及确认按钮和取消按钮的对话框。
                                     确认返回true,取消返回false。
prompt()                             显示可提示用户输入的对话框。
                                     参数1：提示信息。 参数2：输入框的默认值。返回值为用户输入的内容。

open()                               打开一个新的浏览器窗口或查找一个已命名的窗口。
                                     参数1：网址，什么都不填，即打开一个新窗口。参数2：新窗口名字(一般可以不填)。参数3：新打开窗口参数
close()                              关闭浏览器窗口。

setInterval(code,millisec)           按照指定的周期（以毫秒计）来调用函数或计算表达式。(每隔millisec毫秒后执行一次)
                                     code:要调用的函数或要执行的代码串。millisec周期性执行或调用code之间的时间间隔，以毫秒计。
clearInterval()                      取消由 setInterval() 设置的 timeout。
setTimeout()                         在指定的毫秒数后调用函数或计算表达式。
clearTimeout()                       取消由 setTimeout() 方法设置的 timeout。
scrollTo()                           把内容滚动到指定的坐标

方法使用

1. alert confirm prompt以及open函数

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

<script>
// 1. alert
// result = alert("aaa");

// 2. confirm
// var result = confirm("您确定要删除吗？");
// console.log(result)

//3. prompt
// var result = prompt("请输入一个数字!", "haha");
// console.log(result);

// 4. open
// open("http://www.baidu.com")
//open(",",",","width=200,resizable=no,height=100"); //新打开一个宽为200,高为100的窗口
// 5. close
//close()
</script>

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

<script>
    var num = Math.round(Math.random()*100);
    function acceptInput() {
        var userNum = prompt("请输入一个0~100之间的数字!","0");
        if (isNaN(+userNum)) {    //isNaN(x) 函数用于检查其参数是否是非数字值。如果x是特殊的非数字值NaN或者能被转换为这样的值），
                                 // 返回的值就是 true。如果 x 是其他值,则返回false。
            alert("请输入有效数字!");
            acceptInput();
        }
        else if(userNum > num) {
            alert("您输入的大了!");
            acceptInput();
        }
        else if (userNum < num) {
            alert("您输入的小了!");
            acceptInput();
        }
        else {
            var result = confirm("恭喜您!答对了，是否继续游戏");
            if(result) {
                num = Math.round(Math.random()*100);
                acceptInput();
            }
            else {
                close();
            }
        }
    }
    acceptInput()
</script>

</body>
</html>
View Code

2. setInterval, clearInterval

  • setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭
  • 由setInterval()返回的值可用作clearInterval()方法的参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    function showTime() {
        var nowd2 = new Date().toLocaleString();
        var temp = document.getElementById("i1");
        temp.value = nowd2
    }
    var ID;
    function begin() {
        if (ID==undefined){
            showTime();
            ID=setInterval(showTime, 1000);
        }
    }
    function end() {
        clearInterval(ID);
        ID=undefined;
    }
</script>

</body>
</html>
View Code

location

    window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。

location.href          获取当前页面完整的URL
location.search        获取当前URL的？号开始的字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function loadbaidu() {
            location.href = "http://www.baidu.com"
        }
    </script>
</head>
<body>
    <button onclick="loadbaidu()">加载百度页面</button>
</body>
</html>
View Code
posted @ 2019-02-03 14:06  Ethan_Y  阅读(107)  评论(0)  编辑  收藏  举报