BOM浏览器对象模型

咸鱼不咸鱼

已于 2023-08-24 14:23:01 修改

阅读量90

点赞数 1

分类专栏： HTML DOM 文章标签： javascript 前端 html

于 2023-03-08 08:48:33 首次发布

本文链接：https://blog.csdn.net/weixin_53903929/article/details/129395885

版权

HTML DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一 BOM简介

BOM,全称BrowserObjectModel(浏览器对象模型))。它是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他兑现都是该对象的子对象。

在这里插入图片描述
frames：框架对象

location：地址对象

document：文档对象

history：历史对象

navigator：浏览器信息对象

screen：屏幕对象

二 Windows 对象使用

1 定时器

（1）周期定时器及清除

周期定时器

语法：var id = window.setzInterval(function,tiime); 每隔制定时间执行某函数，返回一个标记的id。

time:间隔时间，单位是毫秒

function:要执行的函数

清除周期定时器

window.clearIntervar(id);

<body>
    <div id="time"></div>
    <input type="button" value="暂停" onclick="stop()">
    <input type="button" value="继续" onclick="start()">
    <script>
        // 显示 时间的标签
        var time = document.getElementById("time");
        
        function show(){
            // 获取现在的时间
            var date = new Date();
            var timeFormat = date.toLocaleString();
            // 将时间赋值给id=time的文本内容
            time.innerText = timeFormat;
        }
        // 设置周期定时器
        var id = window.setInterval(show,1000);
        // 停止
        function stop(){
            window.clearInterval(id);
        }
        function start(){
            id = window.setInterval(show,1000);
        }
    </script>
</body>

（2）超时定时器及清除

超市定时器

语法:

var id = window.setTimeOut(function,time):指定时间后执行某方法，返回一个标记的id。

time:指定时间

function:执行的方法

清除超市定时器

window.clearTimeOut(id);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        #img{
            width: 800px;
            height: 800px;
            display: none;/*图片隐藏*/
        }
    </style>
</head>
<body>
    <img src="img/11224.jpg"  id="img">
    <script>
        // 显示 时间的标签
        var img = document.getElementById("img");
        function show(){
            // 图片显示
            img.style.display = "inline-block";
        }
        // 指定时间显示
        window.setTimeout(show,2000);
    </script>
</body>
</html>

2 弹框

1.警告框

–window.alter(“值”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        #img{
            width: 800px;
            height: 800px;
            display: none;/*图片隐藏*/
        }
    </style>
</head>
<body>
    <img src="img/11224.jpg"  id="img">
    <script>
        window.alert("警告！你进入.....");
    </script>
</body>
</html>

2.确认框

–window.confirm(“值”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        #img{
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <img src="img/11224.jpg"  id="img">
    <script>
        window.confirm("你确定进入此吗!");
    </script>
</body>
</html>

3.提示框

window.prompt(“q提示…”,“值”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        #img{
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <img src="img/11224.jpg"  id="img">
    <script>
        var res = window.prompt("请输入名称");
        confirm("确定"+res+"吗");
    </script>
</body>
</html>

3 其他对象

1.location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        
    </style>
</head>
<body>
   <script>
        // 本地对象 的属性href
        alert(window.location.href);
        // 替换本地地址 
        location.href = "http://www.baidu.com";
   </script>
</body>
</html>

2.history对象

（要可前进和可后退的页面，才能进行前进和后退)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        
    </style>
</head>
<body>
    <input type="button" value="后退" onclick="b()">
    <input type="button" value="前进" onclick="f()">
   <script>
        // 后退
        function b(){
            window.history.back();
        }
        // 前进
        function f(){
            history.forward();
        }
   </script>
</body>
</html>

练习

全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        
    </style>
</head>
<body>
    <input type="checkbox" onclick="checkAll()" id="all">全选<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">斗破苍穹<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">大奉打更人<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">无限世界<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">吞噬星空<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">万古剑神<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">我的师兄实在太稳健了<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">凡人修仙传<br>
    <input type="checkbox" onclick="checkOne()" name="hobby">星武神诀<br>
   <script>
      // 全选功能
    /*
        1.获取id=all的input标签的checked属性
        2.若all的checked属性为true,修改所有input标签的checked属性值为true
        3.若all的checked属性为false,修改所有input标签的checked属性值为false
    */
        
        
        function checkAll(){
            var checkedValue = document.getElementById("all").checked;
            var nameArray = document.getElementsByName("hobby");// name集
            // var inputArray = document.getElementsByTagName("input");
            // for(var i = 0; i<inputArray.length;i++){
            //     inputArray[i].checked = checkedValue;
            // }
            /* 改进：通过name属性值获取标签，来设置checked属性值*/
           
            for (var i = 0;i<nameArray.length;i++) {
                nameArray[i].checked = checkedValue;
            }
        }
        // 取消全选
        /*
            1.取消一个，全选就消失
            2.便利name集的checked属性值
            3.出现一个false,全选就取消,且结束循环
        */
        function checkOne(){
            var nameArray = document.getElementsByName("hobby");// name集
            // var flag = false;
            // for (var i = 0;i<nameArray.length;i++) {
            //     if(!nameArray[i].checked){
            //         flag = false;
            //         break;
            //     }else{
            //         flag = true;
            //     }
            // }
            // if(flag){
            //     document.getElementById("all").checked = flag;
            // }else{
            //     document.getElementById("all").checked = flag;
            // }
            /*改进*/
            var flag = true;
            for (var i = 0;i<nameArray.length;i++) {
                if(!nameArray[i].checked){
                    flag = false;
                    break;
                }
            }
            document.getElementById("all").checked = flag;
        }
   </script>
</body>
</html>

轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            width: 800px;
            height: 800px;
            margin: auto;
        }
    </style>
</head>
<body>
    <img src="img/1.jpg" id="img" onmouseover="stop()" onmouseout="start()">
    <script>
        /*
            1.获取id=img的标签的src属性
            2.编写一个函数，使用周期定时器，实现轮播效果
            3.当达到一定数量时，从头开始
        */
        var temp = 1;
        function showImg(){
            document.getElementById("img").src = "img/"+temp+".jpg";
            temp++;
            if(temp == 6){
                temp = 1;
            }
        }
        var id = window.setInterval(showImg,1000);
        /*
            改进:设置停止与继续
            1.获得鼠标停止--清除周期时钟
            2.失去鼠标继续--重新设置时钟
        */
       function stop(){
            window.clearInterval(id);
       }
       function start(){
            id = window.setInterval(showImg,1000);
       }
    </script>
</body>
</html>