JS第七天 BOM开发

最新推荐文章于 2024-06-03 09:15:36 发布

茶里

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量103

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64985318/article/details/129392050

版权

1. BOM概述

1.1 什么是BOM？

Browser Object Model浏览器对象模型，提供可独立于内容而与浏览器窗口进行交互的对象，其核心对象是windows。BOM由一系列相关的对象构成并且每个对象提供了很多方法和属性。BOM缺乏标准，JS语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM V.S BOM

DOM: 文档对象模型

DOM就是把文档当作一个对象来看待

DOM的顶级对象是document

DOM主要学习的是操作页面元素

DOM是W3C的标准规范

BOM：浏览器对象模型

把浏览器当作对象看待

BOM的顶级对象是window

BOM的学习是浏览器窗口交互的一些对象，

BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

1.2 BOM的构成

1. BOM比DOM更大，包含BOM

2. window包含document, location, navigation, screen, history。

3. window是浏览器的顶级对象，具有双重角色，是JS访问浏览器的一个接口。是一个全局对象，定义在全局作用域的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方

法，如alert(), prompt()。window下的一个特殊属性window.name。

2 Window常见事件

2.1窗口加载事件

window.onload = function(){} //文档内容完全加载完成会触发该事件，调用处理函数，而不是立马执行。

//或者

window.addEventListener("load",function(){});


document.addEventListenner('DOMContentLoaded, function(){})DOMContentLoaded
//事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等。
//如果页面图片很多，则用onload加载时间长，用户体验差。

应用onload则JS代码可以放置于文件中任何位置，所以：

但是window.onload传统注册方式只能写一次，如果有多个，会以最后一个window.onload为准。

<!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>
        //window.onload = function(){
        //    var btn = document.querySelector('button');
        //    btn.addEventListener('click', function(){
        //        alert('点击我');
        //    })
        //}

        //或者

        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click', function(){
                alert('11');
            })
        })
    </script>
    <button>点击</button>
</body>
</html>

2.2 调整页面窗口

1. window.onresize

window.onresize = function(){}

<body>
    <script>
        window.addEventListener('resize',function(){
            console.log('变化了');
        })
    </script>
</body>

注意：只要窗口大小发生像素改变，就会触发这个事件，只要我们经常利用这个事件完成响应式布局，window,innerWidth当前屏幕宽度。

3 定时器

3.1 两种定时器

setTimeout()

setInterval()

3.2 setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数]);
//1. 延迟时间单位为毫秒，省略则默认为0，立刻执行。
//2. 可以在外面定义一个函数，然后再setTimeout中写函数名就可以了。
//3. 页面中可能有很多定时器，我们会给定时器加标识符
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

//4. 两种写法：
setTimeout(callback, 3000);
setTimeout('callback()', 3000); //不提倡

1. setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。window可以省略。

2. setTimeout()也称为回调函数。以前的element.onclick = function(){}也是回调函数。

案例：5秒自动关闭的广告

<body>
    <img src="images/淘宝二维码.png" alt="" class="ad">;
    <script>
        var img = document.querySelector('img');
        function close(){
            img.style.display = 'none';
        }
        setTimeout(close, 5000);
    </script>
</body>

3.3 清除定时器clearTimeout()

window.clearTimeout(timeoutID);

widow可省略

e.g:

<body> 
    <button>点击停止爆炸</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function(){
            console.log('boom!');
        })
        btn.addEventListener('click', function(){
            clearTimeout(timer);
        })
    </script>
</body>

3.4 setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

1.重复调用一个函数，每隔这个时间，就回调一次函数

2. 调用函数可以直接写函数，函数名，’函数名（）‘；三种方式

3. 毫秒默认，0执行

4. 定时器命名

<body>
    <script>
        setInterval(function(){
            console.log('1');
        }, 2000);
        //setInterval() 每隔两秒反复回调
        //setTimeout() 到时执行一次
    </script>
</body>

案例：利用setInterval() 实现倒计时的效果

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop  = document.querySelector('.stop');
        var timer = null; //写在外面才是全局变量！！
        begin.addEventListener('click',function(){
            timer = setInterval(function(){
                console.log('hello');
            }, 1000)
        })
        stop.addEventListener('click',function(){
            clearInterval(timer);
        })
    </script>
</body>

3.5 停止setInterval()定时器

window.clearInterval(intervalID);

取消之前通过setInterval()建立的定时器

window可以省略，里面的参数是定时器的标识符。

案例：发送短信

算法：

1. 按钮点击后禁用

2.按钮时间倒计时，通过innerHTML修改

3. 时间到了0则返回原始状态

<body>
    手机号码：<input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;//定义剩下的秒数
        btn.addEventListener('click', function(){
            btn.disabled = true;
            var timer = setInterval(function(){
                if(time == 0){
                    //清除定时器，复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送'
                    time = 10;
                }else{
                    btn.innerHTML = '还剩' + time + '秒';
                    time--;
                }
            }, 1000);
        })
    </script>
</body>