java web-2.8BOM对象

最新推荐文章于 2022-07-27 23:17:23 发布

zhendeWD

最新推荐文章于 2022-07-27 23:17:23 发布

阅读量114

点赞数

分类专栏： Javaweb 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_39795049/article/details/104714053

版权

Javaweb 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

BOM概述

BOM(Browser Object Model)：将浏览器的各个组成部分封装成对象
组成：

window:窗口对象
Navigator：浏览器对象
Screen：显示器屏幕
History：l历史记录
Location：地址栏对象

BOM_Window对象

创建：window对象不需要创建可以直接使用，window.方法名（）；
方法：
1.与弹出框有关的方法

alert()显示带有一段消息和一个确认按钮的警告框
  eg：alert("hello");
      window.alert("hello");
confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框
  eg：confirm("退出？");如果用户点击确定按钮，则方法返回true，如果点击取消，返回false 
prompt（）显示可提示用户输入的对话框
  eg：prompt();

confirm(“退出？”);
在这里插入图片描述
prompt();
2.与开发关闭有关的方法

 close()：关闭浏览器窗口
     谁调用，关闭谁。
 open()：打开一个新的浏览器窗口
   eg:open("http://www.baidu.com")

<body>
<input id = "openBtn" type="button" value="打开窗口">
<input id = "closeBtn" type="button" value="关闭窗口">
<script>
var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick = function () {
        newWindow = open("http://www.baidu.com")
    }

    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        newWindow.close()
    }

</script>
</body>

2.与定时器有关的方法

setTimeOut():在指定的毫秒数后调用函数或计算表达式
     参数:js代码或者方法对象
          毫秒值
     返回值：唯一表示，用于取消定时器
     eg:一次性定时器：setTimeout("alert('boom....')",3000);//3秒后弹出boom...
clearTimeOut():取消由setTimeOut()方法设置的timeout
     eg: var id = setTimeout("alert('boom....')",3000);
         clearTimeout(id);
setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式
     参数:js代码或者方法对象
          毫秒值
     返回值：唯一表示，用于取消定时器
     eg:循环定时器： setInterval("alert('boom....')",3000);
clearInterval（）:取消由setInterval（）设置的timeout
     eg:var id2 = setInterval("alert('boom....')",3000);
       clearInterval(id2);

轮播图示例
在这里插入图片描述
属性：
1.获取其他BOM对象：history，location，Navigator，Screen

  //获取history
        var h1 = window.history();
        var h2 = history;
        alert(h1);
        alert(h2);

2.获取DOM对象：document,
特点：

window对象不需要创建可以直接使用，window.方法名（）；
window引用可以省略。方法名（）；

alert("hello");
window.alert("hello");

BOM_Location对象

1.创建：
(1)window.location
(2)location
2.方法：
reload()：重新加载当前文档，刷新
3.属性：
href :设置或返回完整的url
在这里插入图片描述

案例3_自动跳转首页

<head>
    <meta charset="UTF-8">
    <title>注释</title>
    <style>
        /*
        1.显示页面效果-
         */
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>

<body>
    <!--1.显示页面效果-->
<p>
    <span id = "time">5</span>秒之后，自动跳转到首页
</p>

</body>

<script>
    //2.秒数倒计时
    var second  = 5;
    var time = document.getElementById("time");
    //定义方法，获取span修改span标签内容，时间--
    function showTime() {
        second--;
        //3判断，如果时间<=0，则跳转到首页
        if(second <= 0){
            location.href = "https://www.baidu.com";
        }
        time.innerHTML = second+"";
    }
    //定义要给定时器，一秒执行一次该方法
    setInterval(showTime,1000);
</script>

在这里插入图片描述

BOM_History对象

历史记录对象
1.创建：

window.history
history

2.方法:

back():加载history列表中的前一个URL
forward():加载history列表中的下一个URL
go(参数):加载history列表中的某个具体页面
   正数：前进几个历史记录；    负数:后退几个历史记录

3.属性：
length：返回当前窗口历史列表中的URL数量

<body>
    <input type="button" id = "btn" value="获取历史记录个数">
    <a href="38_history2.html">页面</a>
    <input type="button" id = "forward" value="前进">

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //获得历史记录个数
        var l = btn.length;
        alert(l);
    }

    var forward = document.getElementById("forward");
    forward.onclick = function () {
        history.forward();
    }

</script>

</body>

zhendeWD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java web-2.8BOM对象

BOM概述BOM(Browser Object Model)BOM_Window_弹出方法BOM_Window_打开关闭方法BOM_Window_定时器方法案例2_轮播图BOM_Window_属性BOM_Location案例3_自动跳转首页BOM_History...
复制链接

扫一扫