JavaScript BOM概述、window常见事件、定时器、案例

最新推荐文章于 2024-07-26 11:41:15 发布

MDR_0820

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量141

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/MDR_0820/article/details/120949669

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

BOM

BOM 即 浏览器对象模型 它提供了独立于内容而与浏览器窗口进行交互的对象 其核心对象是 window
BOM 是由一些列相关的对象构成并且每个对象都提供了很多方法与属性
BOM 缺乏标准 JavaScript 语法标准组织是ECMA ，DOM的标准组织是W3C，BOM 最初是Netscape 浏览器标准的一部分

DOM

文档对象模型
DOM 就是把文档当做一个对象来看待
DOM的顶级对象是document
DOM主要学习的是操作元素页面
DOM 是W3C标准规范

BOM

浏览器对象模型
BOM 把浏览器当做一个对象来看待
BOM的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的兼容性较差

BOM的构成

BOM比DOM大包含DOM
在这里插入图片描述

window对象是浏览器的顶级对象它具有双重角色
1.它是JS访问浏览器窗口的一个接口
2.它是一个全局对象定义在全局作用域中的变量函数都会变成window对象的属性和方法

在调用的时候可以省略window
注意 window下的一个特殊属性 window.name 可以输出结果是空不会报错

window常见事件

window .onLoad = function（）{}
或者 window.addEventListener（‘load’，function（）{}）
window.onload 是窗口（页面）加载事件当文本内容完全加载完成会触发事件（包括图像 css文件等）就调用的处理函数
注意：
1.有了window.onLoad 就可以吧JS代码写到页面元素的上方因为onLoad是等页面内容全部加载完毕再去执行处理函数
2.window.onload 传统注册事件方式只能写一次如果多个会议最后一个为准
3.如果用监听方式 addEventListener 则没有限制

调整窗口事件大小

window.onresize = function( ) { }
window .addEventListener(‘risize’,function（）{ }；
window.rnresize 是调整窗口大小加载事件当触发时就调用的处理函数
注意
只要窗口大小发生像素变化就会触发这个事件
我们经常利用这个事件完成响应式布局
响应式布局：点击跳转查看
window.innerWidth 当前屏幕的宽度

定时器

两种定时器

setTimeout ( )
setInterval ( )

setTimeout () 定时器

语法规范 window.setTimeout（调用函数，延时时间）
延时时间是毫秒可以不写默认为0 1000毫秒等于1秒
调用函数可以直接写函数还可以写函数名
因为定时器可能有很多所以我们可以给定时器一个标识符（名字）

<script>
        // setTimeout () 定时器
        // 语法规范  window.setTimeout（调用函数，延时时间）
        //  延时时间是毫秒 可以不写 默认为0 1000毫秒等于1秒
        // 调用函数可以直接写函数 还可以写函数名
        setTimeout(function(){
            console.log('setTimeout () 定时器');
        }, 2000) // 2000是毫秒 等于2秒

        function callback(){
            console.log('定时 调用函数 ');
        }
        var times1 = setTimeout(callback,3000)
        var times2 = setTimeout(callback,5000)
    </script>

在这里插入图片描述

setTimeout（）这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用
而这个函数需要等待时间时间到了才去调用这个函数因为称为回调函数

停止计时器 clearTimeout(timeoutID)

timeoutID 是计时器的名称

<button>停止</button>
    <script>
         var btn = document.querySelector('button')
        var times= setTimeout(function(){
             console.log('爆炸');
         } , 3000)
         btn.addEventListener('click',function(){   // 注册点击事件
             clearTimeout(times)   // 停止计时器 
         })
    </script>

点击之后定时器停止执行

setlnterval()定时器

setInterval( 回调函数，间隔毫秒数);
setInterval();方法重复调用每个这个时间就去调用一次回调函数

<script>
        // setInterval();
        setInterval(function(){
            console.log('持续输出');
        },2000)
    </script>

一直调用
在这里插入图片描述

setTimeout 延时时间到了就去调用这个回调函数只调用一次就结束了这个定时器
setInterval 每隔这个时间就去调用这个回调函数会调用很多次重复调用

小练习倒计时持续输出显示

<body>
    <div>
        <p>距离2022年1月29日23:59:00 还有</p> 
        <span class="day"></span>
        <span class="h">1</span>
        <span class="m">2</span>
        <span class="s">3</span>
    </div>
    <script>
        // 获取元素
        var day = document.querySelector('.day')
        var hour = document.querySelector('.h') // 小时
        var minute = document.querySelector('.m')  // 分钟
        var second = document.querySelector('.s')  // 秒
        var inputTime = +new Date('2022-1-29 23:59:00');//返回的是 用户输入时间总毫秒数
        countDown() // 先调用一次 防止第一次刷新页面出现空白
        // 开启定时器
        setInterval(countDown ,1000);         // 也可以不给时间啊

        function countDown(){
            var nowTime = +new Date(); //返回的是当前时间的总毫秒数
            var times= (inputTime - nowTime) / 1000 // times 是剩余时间的总秒数

            var d = parseInt(times / 60 / 60 /24);   //天
            day.innerHTML = d +'天' //把剩余的小时给黑色盒子

            var h = parseInt(times /60 / 60 % 24); // 小时
            h = h <10 ? '0' + h : h;     //作用是 补0
            hour.innerHTML = h  //把剩余的小时给黑色盒子

            var m = parseInt(times / 60 % 60 ); //  分钟
            m = m <10 ? '0' + m : m;
            minute.innerHTML = m  //把剩余的小时给黑色盒子

            var s = parseInt(times % 60); // 秒数
            s = s <10 ? '0' + s : s;
            second.innerHTML = s  //把剩余的小时给黑色盒子
        }
    </script>
</body>

在这里插入图片描述

会持续刷新

停止 setInterval（）定时器

clearInterval（）方法取消先前通过调用setInterval（）建立的定时器

短信发送计时案例

<body>
    手机号码：<input type="number" name="" id=""> <button>发送</button> 
    <script>
        var ipt = document.querySelector('input')
         var btn = document.querySelector('button')
         var times = 10
         btn.onclick =function(){
             btn.disabled = true
            var timer = setInterval(function(){
                if(times == 0){
                    
                    clearTimeout(timer)       // 清除定时器 
                    btn.disabled=false;       //恢复按钮启用状态
                    btn.innerHTML = '发送'    // 恢复原来文字
                    times = 10                // 需要重新写开时间开始
                } else{
                    btn.innerHTML = '还剩 '+times+'秒可以发送'    // 通过innerHTML 修改button里面的文字
                     times --                  //定义变量不断递减
                }
            },1000);
         }
    </script>
</body>

在这里插入图片描述

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript BOM概述、window常见事件、定时器、案例

BOMBOM 即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是 windowBOM 是由一些列相关的对象构成并且每个对象都提供了很多方法与属性BOM 缺乏标准 JavaScript 语法标准组织是ECMA ，DOM的标准组织是W3C，BOM 最初是Netscape 浏览器标准的一部分DOM文档对象模型DOM 就是把文档当做一个对象来看待DOM的顶级对象是documentDOM主要学习的是操作元素页面DOM 是W3C标准规范BOM浏览器对
复制链接

扫一扫