WebApi编程（四）-BOM

最新推荐文章于 2026-01-05 12:22:51 发布

原创最新推荐文章于 2026-01-05 12:22:51 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了BOM（浏览器对象模型）的核心对象window，详细讲解了window的常见事件，如预加载、窗口大小调整、定时器的使用，并探讨了js执行队列的概念和异步任务处理。此外，还涉及了window对象的location属性用于处理URL，以及两页面之间如何互传值和浏览器类型及历史的检测。

BOM

1.BOM
什么是bom
BOM是浏览器对象模型，核心对象是window，提供了与浏览器窗口进行交互的对象。
在这里插入图片描述
window是浏览器的顶级对象，是js访问浏览器的窗口，js所有的全局变量和函数window对象的属性和方法。
2.window常见事件
预加载：
① window.onload = function(){}
实现加载，因为html是按上下顺序执行，如果js代码放在上边就不好用了，可以使用onload预加载
②window.addEventListener(‘DOMContentLoaded’, function () { })
dom加载完就可以，速度比①快

<!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>
</head>
<body>
    <script>
        // 由于按顺序执行，所以下面的代码出错，不会弹出
        // var button = document.querySelector('button');
        // button.addEventListener('click', function() {
        //     alert('11');
        // } )
        
        // ①onload方法，等待dom，图片，css等全部加载完
        // 传统方法具有唯一性，起作用只能是最后一个
        window.onload = function() {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('11');
        } )
        }

        // 事件监听方法可以绑定多个
        window.addEventListener('load', function () {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('131');
        })
        })
        
        window.addEventListener('load', function () {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('132');
        })
        
        })
        // ②DOMContentLoaded,等待加载完dom就
        window.addEventListener('DOMContentLoaded', function () {
            alert('22222')
        })
    </script>
    <button>点击</button>
</body>
</html>

调整窗口大小
利用resize事件，当窗口大小发生变化时，就会触发事件。

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        // 调整窗口大小resize
        div = document.querySelector('div');
        window.addEventListener('resize', function(){
            console.log('窗口变了！');
            // window.innerWidth 窗口宽度
            if(window.innerWidth < 500) {
                div.style.display = 'none';
            }
        })
    </script>

</body>
</html>

定时器
setTimeout(函数，时间间隔毫秒)
就是过了多长时间执行函数，属于一次性定时器。
clearTimeout（）清楚定时器，特定情况下
setInterval(),重复调用

<!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>
</head>
<body>
    <script>
        // 一次性定时器,过了5000毫秒，就执行函数（可以写函数名），默认为0
        window.setTimeout(function() {
            alert('时间到了');
        }, 5000)
        // 下面写法也可以
        function sm() {
            console.log('haha');
        }
        var sm1 = setTimeout(sm, 2000);
        var sm2 = setTimeout('sm()', 5000);
        
        // 停止定时器
        clearTimeout(sm2);
		
		// 定时器2 反复调用 setInterval()
        setInterval(function() {
           alert('1'); 
        }, 2000);
        // 同样的也可以停止，clearInterval()
    </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>
</head>
<body>
    <img src="D:\java-script_learning\image\ad.jpg" alt="">
    <script>
        var img = document.querySelector('img');
        function close () {
            img.style.display = "none";
        }
        setTimeout(close, 5000);
    </script>
</body>
</html>

Document 倒计时案例

<!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>
</head>
<body>
    <div></div>
    <script>
        function re() {
            var div = document.querySelector('div');
            var now = +new Date();
            var target = +new Date('2022-01-01 00:00:00');
            var remain = (target - now) /1000;
            var day = parseInt(remain / 60 / 60 / 24);
            var hours = parseInt(remain / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours:hours
            var min = parseInt(remain / 60 % 60); 
            min = min < 10 ? '0' + min:min
            var sec = parseInt(remain % 60);
            sec = sec < 10 ? '0' + sec:sec
            var r = '倒计时 ：' + day + ' 天 ' + hours + ' 时 ' + min + ' 分 ' + sec + ' 秒 ！！！！！' ;           div.style.color = 'red';
            div.innerHTML = r;
        }
        setInterval(re, 1000);
    </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>
</head>
<body>
    手机号<input type="number"> <button>发送验证码</button>
    <script>
        var btn = document.querySelector('button');
        var time = 10;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                btn.innerHTML = time + '秒后重试';
                if (time == 0) {
                    clearInterval(timer);
                    btn.innerHTML = '发送验证码';
                    btn.disabled = false;
                    time = 10;
                }else {
                    time = time -1;
                }
            }, 1000);
        })
    </script>
</body>
</html>

3.js执行队列
js是单线程执行，排队进行，不能并发。
为了防止有些任务执行时间长，其他任务需要等待，于是js可以允许进行异步操作。
js先执行同步任务，所有同步任务执行后再去执行异步任务，js会把异步任务先交给异步处理程序，异步处理程序在受到相应的操作后放到异步任务队列里，无需操作的异步任务直接放到任务队列
常见异步任务：click，resize，load，error，setInterval()，setTime
4.window对象之location
location.href:获取整个url
location.host:主机
location.serach:搜索条件
location.post:端口
location.pathname:路径
在这里插入图片描述

    <script>
        console.log(window.location.href);
        console.log(window.location.host);
        console.log(window.location.pathname);
    </script>

5.两页面之间互传值
a页面

<!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>
</head>
<body>
    <input type="text">
    <button>登录</button>
    <script>
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function(){
            location.href = 'file:///D:/java-script_learning/WebApi/不同页面传值1.html' + '?name=' + input.value; 
        })
    </script>
</body>
</html>

b页面

<!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>
        div {
            color: brown;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var names = location.search.replace('?', '')
        var ser = names.split('=');
        div.innerHTML = ser[1] + '欢迎你！';
    </script>
</body>
</html>

6.浏览器类型和历史

<!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>
</head>
<body>
    <script>
        // 识别手机还是pc
        console.log(window.navigator.userAgent);
        // 浏览器历史前进后退等。
        // 前进
        window.history.forward;
        // 后退
        history.back;
        // 前进固定步数
        history.go(2);
    </script>
</body>
</html>