前端JavaScript之BOM对象

一概述

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

二 Window对象

在JavaScript编程中，除了用DOM模型访问HTML页面中的内容，有时还需要访问和操作除HTML本身外的一些信息，比如：浏览器的窗口大小、HTTP网址等，这些信息通过window对象和其子对象document（文档）、history（历史），location（URL相关）、navigator（浏览器）的一些固有属性和方法进行访问。

其他说明：

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

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性
全局函数是 window 对象的方法
甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("id");

等同于

document.getElementById("id");

2.1 Window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

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

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

2.2 Window对象方法的使用

alert()

alert("需要输出的信息");

confirm()

confirm("需要输出的信息");

prompt()

prompt("请输入信息：","默认值");   //参数1:提示信息; 参数2:输入框的默认值。返回值是用户输入的内容。

var num = Math.round(Math.random()*10);    //随机生成一个0-10的数字
//新建用户输入函数
function acceptInput(){
    var userNum = prompt("请输入一个0~10之间的数字!","0");   //2.让用户输入(prompt)，并接受用户输入结果
    //判断输入是否为数字
    if(isNaN(+userNum)){
        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()*10);
            acceptInput();
        }else{
            close();
        }
    }
}
acceptInput();

猜数字游戏

open&close

语法：open(URL,name,specs,replace)
URL:可选，打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name:可选，指定target属性或窗口的名称，支持以下值：
    _blank - URL加载到一个新的窗口。这是默认
    _parent - URL加载到父框架
    _self - URL替换当前页面
    _top - URL替换任何可加载的框架集
    name - 窗口名称
specs:可选，值新打开窗口的参数，比如：width，height等
replace：true - URL 替换浏览历史中的当前条目；false - URL 在浏览历史中创建新的条目

setInterval&clearInterval

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

code/function    必需。要调用一个代码串，也可以是一个函数。
milliseconds     必需。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...    可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="nowdate" type="text" onclick="begin()">
    <button onclick="end()">停止</button>

<script>
    function showTime(){
        var nowDate=new Date().toLocaleString();
        var temp=document.getElementById("nowdate");
        temp.value=nowDate;
    }
    var date;
    function begin(){
        if (date == undefined){
             showTime();
             date = setInterval(showTime,10);
        }
    }
    function end(){
        clearInterval(date);
        date = undefined;
    }

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

示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进度条</title>
    <style>
        .myProgress {
            width: 500px;
            height: 15px;
            background-color: #c0cddf;
            display: inline-block;
        }
        .myBar {
            background-color: green;
            width: 0px;
            height: 15px;
        }
    </style>
</head>

<body>
    <h2>JavaScript 进度条</h2>
    <div class="myProgress">
        <div class="myBar"></div>
    </div>
    <span class="dispaly"></span><br><br>
    <button onclick="start()">开始</button>
    <button onclick="pause()">暂停</button>

    <script>
        function start() {
            id = setInterval(frame, 100);   // 设id为全局变量
            flag = true;
        }

        function pause() {
            flag = false;;
        }

        var width = 0;
        function frame() {
            var ele = document.getElementsByClassName("myBar")[0];
            var dispaly = document.getElementsByClassName("dispaly")[0];
            if (width == 100 || flag == false) {
                clearInterval(id);
            } else {
                width++;
                ele.style.width = width + '%';
                dispaly.innerHTML = ele.style.width;
            }
        }

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

示例2--进度条

关于更多window对象及其子对象详细可参考：http://www.runoob.com/jsref/obj-window.html

posted @ 2018-09-17 21:35 Joe1991 阅读(100) 评论(0) 收藏举报

刷新页面返回顶部

Joe1991

前端JavaScript之BOM对象

一 概述

二 Window对象

2.1 Window对象方法

2.2 Window对象方法的使用

公告

一概述