JavaScript - BOM和定时器的使用

最新推荐文章于 2022-07-28 22:14:44 发布
最新推荐文章于 2022-07-28 22:14:44 发布
阅读量255 收藏 3
点赞数
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/118209616
版权

文章目录

一、BOM

BOM即浏览器对象模型. 它提供了独立于内容而与浏览器窗口进行交互的对象, 其核心对象是window.

BOM把浏览器当做一个对象来看待, BOM的顶级对象是window.

二、BOM的构成

window对象是浏览器的顶级对象.

window对象是JS访问浏览器窗口的一个接口

window对象是一个全局对象, 定义在全局作用域中的变量, 函数都会变成window对象的属性和方法.

三、window对象的常见事件

1. 窗口加载事件

window.onload = function() {}
或者
window.addEventListener("load", function(){});

window.onload 是窗口加载事件, 当文档内容完全加载完成会触发该事件.

有了window.onload就可以把JS代码写到页面元素的上方, 因为onload是等页面内容全部加载完毕, 再去执行处理函数.

window.onload 传统注册事件方式只能写一次, 如果有多个, 会以最后一个window.onload为准.

另一种方式

document.addEventListener('DOMContentLoaded', function(){})

DOMContentLoaded事件触发时, 仅当DOM加载完成, 不包括样式表, 图片, flash等.

2. 调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize", function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用处理函数.

只有窗口大小发生像素变化, 就会触发这个事件.

window.innerWidth

window.innerWidth : 获取当前浏览器窗口的大小.

案例 : 根据浏览器窗口大小调整元素的显示或隐藏.

<!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: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

四、定时器

window对象给我们提供了2个定时器.

  1. setTimeout()
  2. setInterval()

1. setTimeout()

语法 :

window.setTimeout(调用函数, [延迟的毫秒数]);

  • 用于设置一个定时器, 该定时器在定时器到期后执行调用函数.

  • 延时时间是毫秒, 可以省略, 如果省略, 默认是0.

  • 调用函数可以直接写函数, 还可以写函数名

<!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>
        // setTimeout(function () {
        //     alert('时间到');
        // }, 2000);
        function callback() {
            alert('时间到')
        }
        setTimeout(callback, 2000);
    </script>
</body>

</html>
  • 页面中可能有多个定时器, 我们需要给定时器添加名字来区分.
<body>
    <script>
        // setTimeout(function () {
        //     alert('时间到');
        // }, 2000);
        function callback() {
            alert('时间到')
        }
        var time1 = setTimeout(callback, 2000);
        var time2 = setTimeout(callback, 3000);
    </script>
</body>

回调函数

setTimeout() 这个调用函数我们也称为回调函数.

回调函数的意思就是回头调用的意思, 上一件事干完, 再回头调用这个函数.

案例 : 定时关闭广告

<!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: 132px;
            height: 469px;
            background-image: url(./images/ad.jpg);
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var div = document.querySelector('div');
            setTimeout(function () {
                div.style.display = 'none';
            }, 5000)
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

2. 停止setTimeout()定时器

window.clearTimeout(timeoutID)

3. setInterval()

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

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>
    <style>
        .box {
            width: 190px;
            height: 260px;
            background-image: url(./images/bg.png);
            text-align: center;
        }

        .title {
            font-size: 30px;
            font-weight: 700;
            padding-top: 31px;
            color: #fff;
        }

        .desc {
            margin-top: 90px;
            font-size: 14px;
            color: #fff;
        }

        .timer {
            display: block;
            width: 130px;
            height: 30px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
        }

        .timer span {
            position: relative;
            display: block;
            float: left;
            width: 30px;
            height: 30px;
            background-color: black;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

        .time_houer,
        .time_minute {
            margin-right: 20px;
        }

        .box .timer .time_houer:after {
            content: ':';
            position: absolute;
            right: -12.5px;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }

        .box .timer .time_minute:after {
            content: ':';
            position: absolute;
            right: -12.5px;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">京东秒杀</div>
        <div class="desc"><strong style="font-size: 16px;">12:00</strong>点场 距结束</div>
        <span class="timer">
            <span class="time_houer"></span>
            <span class="time_minute"></span>
            <span class="time_second"></span>
        </span>
    </div>
    <script>
        var time_houer = document.querySelector('.time_houer');
        var time_minute = document.querySelector('.time_minute');
        var time_second = document.querySelector('.time_second');

        // 获取将要到达的时间
        var end = +new Date('2021-6-25 18:00:00');

        function countDown() {
            // 获取当前时间
            var start = +new Date();
            // 差值
            var diff = (end - start) / 1000;
            var h = parseInt(diff / 60 / 60 % 24);  // 获取小时
            h = h < 10 ? '0' + h : h;
            time_houer.innerHTML = h;
            var m = parseInt(diff / 60 % 60);  // 获取分钟
            m = m < 10 ? '0' + m : m;
            time_minute.innerHTML = m;
            var s = parseInt(diff % 60);  // 获取秒数
            s = s < 10 ? '0' + s : s;
            time_second.innerHTML = s;
        }
        // 先调用一次函数, 防止页面刚刷新有空白的问题.
        countDown();
        setInterval(countDown, 1000);
    </script>
</body>

</html>

4. 停止setInterval()定时器

window.clearInterval(intervalID);

clearInterval() 方法取消先前通过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>
    <input type="text"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var second = 5;
        btn.onclick = function () {
            btn.disabled = true;
            var ine = setInterval(function () {
                second--;
                btn.innerHTML = '还剩' + second + '秒再次点击';
                if (second == 0) {
                    btn.disabled = false;
                    second = 5;
                    btn.innerHTML = '发送';
                    window.clearInterval(ine);
                }
            }, 1000)
        }
    </script>
</body>

</html>

五、this

this的指向在函数定义的时候是确定不了的, 只有函数执行的时候才能确

定this到底指向谁, 一般情况下this的最终指向的是那个调用它的对象

六、this指向的几种情况

  1. 全局作用域或者普通函数中this指向全局对象window
<script>
    console.log(this);  // Window
    function fn() {
        console.log(this);
    }
    // window.fn();
    fn();  // Window
    window.setTimeout(function () {
        console.log(this);  // Window
    }, 1000)
</script>
  1. 方法调用中谁调用this指向谁
<body>
    <button>点击按钮</button>
    <script>
        var o = {
            sayHi: function () {
                console.log(this);  // o
            }
        } 
        o.sayHi();

        // this指向的是调用者
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log(this);  // <button>点击按钮</button>
        }
    </script>
</body>
  1. 构造函数中this指向构造函数的实例.
<body>
    <button>点击按钮</button>
    <script>
        function Fun() {
            console.log(this);  // Fun
        }
        var fun = new Fun();
    </script>
</body>
学习中的小菜鸟.
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Js定时器的应用，用于写倒计时，时钟，计时表。BOM对象。
xh0112的博客
01-08 263
定时器 在js中定时器有两种 1，setInterval() 2，setTimeout() setInterval() 格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次); 【注意】可以写执行的代码，也可以直接传入函数。 返回值：启动定时器时，系统分配的编号 关闭定时器的方式： 1.关闭页面。 2.clearInterval(); 【注意】 clearInterval函数需要一个参数：定时器的编号。 setTimeout（） 只在指定时间后执行一次 关闭：clearT
定时器和BOM
qq_37607451的博客
01-13 200
定时器和BOM &amp;lt;body&amp;gt; &amp;lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;按钮&quot;/&amp;gt; &amp;lt;input type=&quot;button&quot; id=&quot;btn_&quot; value=&quot;停止定
利用JS BOM制作简易时钟
A_hapiness的博客
09-02 438
用到的知识点： 1.BOM 2.DOM 3.间隔定时器 4.date对象 HTML和CSS代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
BOM系列之定时器
老__L的博客
07-28 369
定时器
JS BOM定时器的实现
夏沐的博客
02-20 423
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;script&gt; //BOM中有两个定时器---计时器 &lt;/s
web API- BOM.pdf
10-17
下面将详细讨论BOM中的关键概念和常用方法。 ### 1. `setTimeout` 和 `clearTimeout` `setTimeout` 函数用于在指定的毫秒数后调用一个函数或者执行某段代码。这是一个非常基础且常用的异步编程技术。例如： ```...
BOM系列第一篇之定时器setTimeout和setInterval
09-01
在BOM系列的第一篇中，我们重点关注的是定时器`setTimeout`和`setInterval`，这两个方法是JavaScript中处理异步编程的重要工具。 `setTimeout`方法允许我们在指定的毫秒数之后执行一个函数或字符串。它接受两个主要...
Javascript-Api:使用Javascript API
04-02
JavaScript API，全称为Application Programming Interface，是通过JavaScript语言实现的一系列预先定义的函数和对象，允许开发者访问操作系统、浏览器功能或者第三方服务的功能。在Web开发中，JavaScript API扮演着...
JavaScript定时器设置、使用与倒计时案例详解
01-19
本文实例讲述了JavaScript定时器设置、使用与倒计时案例。分享给大家供大家参考，具体如下： 1、设置定时器 定时器，适用于定时执行的任务中。在BOM的window对象中，有这样的两个函数是用于设置定时器 setTimeout...
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
12-28
时钟 　　最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可 <div id=myDiv></div> [removed] myDiv[removed] = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv[removed] = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; },500); [removed] 倒计时 【1】简易倒计时 　　简易倒计时就是每
Js-Bom-refrence:Js Bom Refrence
04-04
JavaScript Browser Object Model (BOM) 是前端开发中的一个重要概念，它允许我们与浏览器进行交互，管理窗口、位置、历史记录、存储以及定时器等。在"Js-Bom-refrence"这个资源中，我们可以期待找到关于JavaScript ...
js基础-批量生成标签 100个小方框
姗姗的博客
07-08 1917
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
JS-BOM-定时器（附源码案例）
路遇惊喜
12-18 2309
1. 设置定时器 setInterval()；循环定时器：固定时间间隔指定一次，像闹钟一样，不关闭继续执行。 setTimeout()；炸弹定时器：只执行一次，不能执行下一次了。 //调用方法：
JavaScript - 操作元素 - 获取自定义属性值
qq_33962481的博客
06-22 7282
文章目录一、定义属性的操作1.获取属性值2.设置元素属性值3. 移除属性 一、定义属性的操作 二 选项卡案例 三 h5自定义属性
JS数组中的方法
qq_33962481的博客
03-24 3847
js数组的方法
JavaScript - 操作元素 - 节点操作 - 复制节点
qq_33962481的博客
06-23 2369
文章目录一、复制节点二、添加节点 一、复制节点 语法 : node.cloneNode() 返回调用该方法的节点的一个副本. 如果括号参数为空或者为false, 则是浅拷贝, 即只克隆复制节点本身, 不克隆里面的子节点. 如果括号参数为true, 则是深拷贝, 克隆复制节点本身和里面的子节点. 二、添加节点 ...
JavaScript - 操作元素 - 修改元素属性和样式属性
qq_33962481的博客
06-20 1433
文章目录一、修改元素属性 一、修改元素属性 <body> <button id='btn1'>第一张</button> <button id='btn2'>第二张</button> <br> <img src="./images/1.jpg" alt=""> <script> // 获取元素 var btn1 = document.getElem
JavaScript - 操作元素 - 改变元素内容
qq_33962481的博客
06-18 1207
文章目录一、改变元素内容二、元素可以不用添加事件三、innerText 和 innerHTML的区别四、修改元素属性 一、改变元素内容 element.innerText : 从起始位置到终止位置的内容, 但它去除html标签, 同时空格和换行也会去掉 element.innerHTML : 从起始位置到终止位置的内容, 包括html标签, 同时保留空格和换行. <body> <button>显示当前系统时间</button> <div>某个
day10_JavaScript高级_docx1
最新发布
08-04
在Day10的JavaScript高级课程中，主要关注两个核心知识点：Browser Object Model (BOM) 和 Document Object Model (DOM)。这两个模型是Web开发中的关键组成部分，对于理解和操纵网页内容以及用户交互至关重要。 BOM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值