【Java Web_04】BOM

2021-02-04 10:09:47 浏览数 (2)

一、BOM

1. 概述
代码语言:javascript复制
* BOM:Browser Object Model 浏览器对象模型
2. 组成
代码语言:javascript复制
① Window:窗口对象
② Navigator:浏览器对象
③ Screen:显示器屏幕对象
④ History:历史记录对象
⑤ Location:地址栏对象

二、Window

1. 方法
代码语言:javascript复制
alert():弹出警告框
prompt():弹出可输入对话框
confirm():弹出确认框
colse():关闭当前窗口
open(URL):打开新窗口
setTimeout("javaScript;",time):一次性倒计时
clearTimeout(id):取消 id 所代表的一次性倒计时
setInterval("javaScript;",time):循环倒计时
clearInterval(id):取消 id 所代表的循环性倒计时
2. 属性
代码语言:javascript复制
① 获取其他对象
    * Navigator:浏览器对象
    * Screen:显示器屏幕对象
    * History:历史记录对象
    * Location:地址栏对象
② 获取 DOM 对象
    * document
3. 特点
代码语言:javascript复制
* Window对象不需要创建可以直接使用
* Window的方法可以直接使用

三、Location

1. 方法
代码语言:javascript复制
① reload():刷新网页
2. 属性
代码语言:javascript复制
* href:获取/设置地址
* var a = kk        //获取链接
* kk = "https://www.baidu.com"     //设置外部链接需要加协议
3. 示例
代码语言:javascript复制
//5秒后跳转至百度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div {
            width: 300px;
            height: 100px;
            border: 2px silver solid;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            text-align: center;
        }
        #message {
            margin-top: 15px;
            font-size: 20px;
            color: deepskyblue;
        }
        a:link{
            color: red;
            text-decoration: none;
        }
    </style>

</head>
<body>
    <div id="div">
        <div id="message">注册成功</div>
        <br />
        <span id="span">5</span>秒后跳转至百度,点击<a href="javascript:void(0)" id="a">这里</a>直接跳转
    </div>
 
<script>
    //获取元素
    var span = document.getElementById("span");
    var a = document.getElementById("a");
 
    //设置初始值
    var time = 5;
    function f1() {
        time--;
        //倒计时结束跳转
        if (time <= 0) {
            kk = "https://www.baidu.com";
        }
        //修改显示的倒计时
        span.innerHTML = time   "";
    }
 
    //单击事件
    a.onclick = function () {
        kk = "https://www.baidu.com";
    };
 
    //循环执行
    setInterval(f1,1000);
</script>
</body>
</html>

四、History

1. 方法
代码语言:javascript复制
① back():加载历史记录中的前一个网页
② forward():加载历史记录中的后一个网页
③ go(param):加载历史记录中的一个网页
    param: 
            n    --->    前进n页
            -n    --->    后退n页
2. 属性
代码语言:javascript复制
* length:history中的记录个数
3. 注意
代码语言:javascript复制
* 是当前页面的历史记录不是浏览器的历史记录

0 人点赞