JavaScript（BOM、窗口事件和计时器）

最新推荐文章于 2023-08-15 19:52:54 发布

Han_Zhou_Z

最新推荐文章于 2023-08-15 19:52:54 发布

阅读量662

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121749778

版权

一、BOM简介

1、什么是BOM

BOM：浏览器对象,可以和浏览器窗口进行交互的对象其核心对象是window对象

2、BOM和DOM的区别

DOM：是文档对象模型，把文档当做一个对象来看待，它的顶级对象是document

BOM：是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window

3、BOM的构成

二、window对象的常见事件

1、窗口加载事件

window.onload：是窗口加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会出发该事件。

// 方式1
window.onload = function () {};
// 方式2
window.addEventListener('load', function () {});

2、调整窗口大小事件

document.DOMContentLoaded：加载事件，会在DOM加载完成时触发（加载不包括CSS样式表、图片和flash动画等额外内容的加载）

window.onresize：当调整window窗口大小的时候，就会触发window.onresize事件

// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {});

3、案例

<body>
    <script>
        window.addEventListener('load',function(){
            alert('页面加载中')
        })

        window.addEventListener('resize',function(){
            console.log('窗口大小改变了')
        })
    </script>
</body>

窗口大小改变时会记次数

三、计数器

1、定时器方法

setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

2、案例（3s后自动关闭广告）

使用setTimeout()实现3秒后自动关闭广告的效果

<body>
    <script>
        var timer = setTimeout(func,3000);//只执行一次
        setInterval(func,2000)//会重复执行
        function func(){
            console.log("广告没有了")
        }
    </script>
</body>

3、案例（60s内只能发送一次短信）

可重复进行发送

注意：第一次time倒计时结束后，要再一次向time赋值，这样才可以循环的发送

<body>
    <div>
        <label>
            手机号码：
            <input type="text">
            <button id="btn">发送</button>
        </label>
    </div>
    <script>
        //1、先获取按钮
        var btn = document.querySelector('#btn');
        var time = 60;
        btn.addEventListener('click',function(){
            btn.disabled = true;//按钮不可用
            
            //2、先创建定时器
            var timer = setInterval(function(){
                if(time == 0){
                    //2.1、清除定时器
                    clearInterval(timer);
                    //2.2、让按钮变的可用
                    btn.disabled = false;
                    //2.3、让按钮的文字变为‘发送’
                    btn.innerHTML = '发送';
                    time = 60;
                }else{
                    btn.innerHTML = '还剩'+time+'秒';
                    time--;
                }
            },1000)
        })
    </script>
</body>

Han_Zhou_Z

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（BOM、窗口事件和计时器）

目录一、BOM简介1、什么是BOM2、BOM和DOM的区别3、BOM的构成二、window对象的常见事件1、窗口加载事件2、调整窗口大小事件3、案例三、计数器1、定时器方法2、案例（3s后自动关闭广告）3、案例（60s内只能发送一次短信）一、BOM简介1、什么是BOMBOM：浏览器对象,可以和浏览器窗口进行交互的对象其核心对象是window对象2、BOM和DOM的区别DOM：是文档对象模型，把文档当做一个对象来看待，它的顶级对象是docu.
复制链接

扫一扫