JavaScript学习记录(BOM)

于 2024-05-21 12:31:38 发布
阅读量792 收藏 3
点赞数 18
文章标签： javascript 学习 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56685529/article/details/139048665
版权

文章目录

一、BOM概述

1.什么是BOM

在这里插入图片描述

二、window对象常见事件

1.窗口加载事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
 
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

2.调整窗口大小事件

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);
 
                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
 
            })
        })
    </script>
    <div></div>
</body>

三、定时器

1. setTimeout()定时器

<body>
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');
 
        // }, 2000);
        function callback() {
            console.log('爆炸了');
 
        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

2.停止setTimeout（）定时器

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

3. setInterval（）定时器

<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');
 
        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

4.停止setInterval（）定时器

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');
 
            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

发送短信案例

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        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 = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
 
        })
    </script>
</body>

5.this

在这里插入图片描述

<body>
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
 
        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);
 
        function fn() {
            console.log(this);
 
        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);
 
        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象
 
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象
 
        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象
 
            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象
 
        }
        var fun = new Fun();
    </script>
</body>

四、JS执行机制

在这里插入图片描述

1.同步和异步

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、location对象

1.什么是location对象

在这里插入图片描述

2.URL

在这里插入图片描述

3.location对象的属性

在这里插入图片描述
案例：登录携带参数跳转

<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

4.location对象的方法

在这里插入图片描述

六、navigator对象

在这里插入图片描述

七、history对象

在这里插入图片描述

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>
弹guitar的程序员
关注
  • 18
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js计时器的启动与停止_Flink 可重播的过程函数：时间，顺序和计时器
weixin_34984088的博客
12-16 297
如果您想深入了解数据流和实时处理，请考虑加入我们的Bird团队！该帖子也出现在Ververica Flink博客上。通过流处理检测脱机踏板车Bird面临的一些最有趣的挑战涉及处理无底座物理硬件。 踏板车硬件不仅会发生故障，而且踏板车可能会被不良行为者窃取或破坏。 我们从踏板车上收集遥测数据，但是分析这些数据可能是具有挑战性的。流处理非常适合从遥测数据中提取见解。 我们使用Flink处理来自Kafk...
window事件之定时器
qq_37860317的博客
11-09 334
setTimeout 语法规范： window.setTimeout(调用函数, 延时时间); 1. 这个window在调用的时候可以省略 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’ 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字) setTimeout(function() ...
javascript中的定时器入门
weixin_30556161的博客
01-28 133
JavaScript提供定时器（timer）的功能，可以延期执行或重复执行函数或代码段。 window对象提供了三个方法来实现定时器的效果，分别是setTimeout()、setInternal()和requestAnimationFrame()。 定时器是JavaScript动画的核心技术。 setTimeout() setTimeout()方法用来指定某个函数或代码段/字符串...
js 定时器_[译]JavaScript定时器：你需要知道的每个知识点
weixin_39530960的博客
11-22 283
JavaScript定时器：你需要知道的每个点原文链接： medium.com几周前我在推特上发布了这样一个面试问题： JavaScript面试问题： 在哪里可以找到setTimeout和setInterval的源代码？（他们在哪里实现的？） 你怎么在面试中回答？（你不能去网上搜索）function setTimeOut(callback  继续往下看之前先试着回答这个问题 推特上半数的回答都是...
JS--开启和停止定时器
weixin_54250982的博客
06-22 4707
开启和停止定时器
JavaScript基础&BOM，学习Java第42天
07-31
JavaScript基础&BOM技术 Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型 注：ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
JavaScript 学习笔记（五）
10-29
在这一部分的学习笔记中，我们将深入探讨JavaScript中的本地对象、内置对象以及宿主对象，同时也会涉及作用域和关键字`this`的使用。 首先，我们来看本地对象。本地对象是JavaScript引擎自身提供的对象，它们直接由...
javascript中的BOM.xmind
09-22
自己总结的JavaScript中BOM的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
js中的定时器的开启与关闭
qq_43435403的博客
11-15 3641
setInterval() 指在指定周期内，不断调用某个函数 语法： setInterval(function,time,lang) 参数： function:必需参数，要调用的函数或要执行的代码串 time:必需参数，每隔多长时间调用函数，单位为毫秒 lang:可选参数，运行的脚本语言，JScript | VBScript | JavaScript clearInterval() 表示停止setInterval定时器调用函数 function getTime() { console.lo
js计时器(开始计时、停止计时、重置)
02-20
计时器的实现，有开始计时、停止计时、重置功能。
JS实现按钮控制计时开始和停止功能
10-19
给大家介绍了JS实现按钮控制计时开始和停止功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
JavaScript暂停和继续定时器的实现方法
10-21
主要介绍了JavaScript暂停和继续定时器的方法的相关资料,非常不错，需要的朋友可以参考下
js如何实现定时器的开启和关闭
HEConfidence的博客
04-20 8623
我们在使用定时器的时候，可能需要对一个定时器进行多次开启和关闭，那么，如何才能有效控制定时器呢？ //定义一个函数 var update = function (){ console.log("这是一个定时器"); } var time1 = setInterval(update,2000); //关闭定时器 clearInterval(time1); //再次开启定时器 time1 = setInterval(update,3000); 后面的time1不需要写var，不然相当于重新定义
js计时器的启动与停止_停止按钮是常闭触点，梯形图也是闭点，为什在PLC中，用常开接点呢？...
weixin_39521835的博客
12-24 525
电工学习网：www.diangon.com关注电工学习网官方微信公众号“电工电气学习”，收获更多经验知识。微信用户求助：停止按钮是常闭触点，梯形图也是闭点，为什在plc中，用常开接点呢？题目说的梯形图是原电气控制系统中常用的继电器、接触器线路图基础上演变而来的，采用的是因果关系来描述事件发生的条件和结果，每个梯级是一个因果关系。在梯形图中，事件发生的条件在左边表示，事件发生的结果在右边表...
javaScript:实现倒计时定时器setInterval的开始计时、暂停计时、停止计时效果
小福气的博客
07-20 7958
描述： 点击开始，从60秒开始计时； 点击停止，时间会重置，等再次点击开始，就会从60开始； 点击暂停，倒计时暂停，再次点击开始，则从暂停时的时间开始倒计时 效果如图： 代码如下： <button>开始</button> <button>停止</button> <button>暂停</button> <div>倒计时：60秒</div> <script> .
window常见事件（包含定时器及案例）
weixin_48340600的博客
09-23 3350
window常见事件 1、window.onload() 窗口加载事件 有了它，我们就可以在页面的任何位置的script标签写js代码 因为onload是等页面全部内容加载完毕之后，再去执行函数内的代码，使用时我们用事件包含起来就行了 window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener
js写可以暂停的电子时钟
weixin_46249441的博客
12-15 2082
完整代码如下： html： <!DOCTYPE html> <html lang="zh-CN"> <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" /&...
JavaScript的BOM
最新发布
05-10
BOM（浏览器对象模型）是指浏览器提供的一组对象，它们可以访问和控制浏览器窗口，比如location、navigator、history、screen等对象，通过这些对象可以获取或修改浏览器窗口的URL、浏览器信息、浏览历史记录、屏幕尺寸等信息。BOM的核心对象是window对象，它表示整个浏览器窗口。通过window对象可以访问和控制BOM的其他对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值