JavaScript中的bom对象

最新推荐文章于 2023-04-16 00:10:03 发布

枸杞配红枣

最新推荐文章于 2023-04-16 00:10:03 发布

阅读量246

点赞数 2

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_41586079/article/details/83064249

版权

HTML 专栏收录该内容

10 篇文章

订阅专栏

首先，bom是 broswer object model 的缩写，意思是浏览器对象模型；

下面介绍bom里的几个对象。

1.navigator：获取客户机的信息（浏览器的信息）

2.screen：获取屏幕的信息

下面演示一下navigator里的一个appName属性，和screen 的height属性

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

<script type="text/javascript">
    document.write(navigator.appName);//返回浏览器的名称
    document.write("<br/>");
    document.write(screen.height);//返回显示屏幕的高度
</script>

</body>
</html>

3.location：请求url地址

href属性：获取请求的url地址

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

<script type="text/javascript">
    document.write("<br/>");
    document.write(location.href);
</script>

</body>
</html>

这个属性还可以设置url地址；

页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另一个页面

演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="to" onclick="href1();"/>
<script type="text/javascript">
    // document.write(navigator.appName);//返回浏览器的名称
    // document.write("<br/>");
    // document.write(screen.height);//返回显示屏幕的高度
    // document.write("<br/>");
    // document.write(location.href);//获取url地址
    // document.write("<br/>");

    function href1() {
        location.href="Login.html";
    }
</script>

</body>
</html>

点击这个按钮就可以跳转到Login.html页面

4.history：请求url的历史记录

这里我们先创建三个页面，第一个页面写入一个超链接，跳转到第二个页面，第二个页面也写入一个超链接，跳转到第三个页面，然后第二个页面写入两个按钮，一个back（退回第一个页面），一个next（进入第三个页面）。

这里就只放出第二个页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="back" onclick="href1();"/>
<input type="button" value="next" onclick="href2();"/>
<p></p>
<a href="BomStudy.html">aaa</a>

<script type="text/javascript">
    function href1() {
        history.back();//使用history.go(-1);也可以
    }
    function href2() {
        history.forward();//使用history.go(1);也可以
    }
</script>
</body>
</html>

5.window：窗口对象

alert方法：页面弹出一个框，显示内容

confirm方法：确认窗口

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

<script type="text/javascript">
    window.confirm("是否删除");
</script>

</body>
</html>

需要注意，window.confirm("");是有返回值的，点确定返回true，取消返回false。

prompt方法：输入的对话框

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

<script type="text/javascript">
    // var add=window.confirm("是否删除");
    // document.write(add);
    window.prompt();
</script>

</body>
</html>

这里面是可以添加元素的，如下：

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

<script type="text/javascript">
    // var add=window.confirm("是否删除");
    // document.write(add);
    window.prompt("输入你的QQ号","输入数字");
</script>

</body>
</html>

open方法：打开一个新的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="open" onclick="opens();"/>
<script type="text/javascript">
    // var add=window.confirm("是否删除");
    // document.write(add);

    // window.prompt("输入你的QQ号","输入数字");

    function opens() {
            window.open("text.html");
        }



</script>

</body>
</html>

close方法：关闭窗口

定时器：

setInterval("js代码"，毫秒数)

<script type="text/javascript">
    // var add=window.confirm("是否删除");
    // document.write(add);

    // window.prompt("输入你的QQ号","输入数字");

    // function opens() {
    //         window.open("text.html");
    //     }

    setInterval("alert('123')",2000);

</script>

这一行代码的意思是每2000毫秒弹出一个消息框

setTimeout("js代码"，毫秒数)

<script type="text/javascript">
    // var add=window.confirm("是否删除");
    // document.write(add);

    // window.prompt("输入你的QQ号","输入数字");

    // function opens() {
    //         window.open("text.html");
    //     }

    // setInterval("alert('123')",2000);
    setTimeout("alert('123')",2000);
</script>

这一行代码的意思是2000毫秒后打开一个消息框；

clearInterval方法:清除setInterval设置的定时器

clearTimeout方法:清除setTimeout设置的定时器

上面两个方法，都需要给要删除的定时器设置ID，然后用ID删除定时器。