JavaScript WebAPI学习 demo7

最新推荐文章于 2023-05-05 13:22:58 发布

菜鸟小铭

最新推荐文章于 2023-05-05 13:22:58 发布

阅读量486

点赞数 1

分类专栏： JavaScript学习文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_46170034/article/details/106130017

版权

这篇笔记详细介绍了JavaScript中的BOM浏览器对象模型，重点讲解了window对象的事件、定时器（setTimeout和setInterval）的使用，包括自动关闭广告和倒计时案例，还涉及this指向、同步与异步执行机制以及location对象的应用。

摘要由CSDN通过智能技术生成

JavaScript WebAPI学习

这篇笔记主要讲了窗口大小事件，两种定时器，this指向得问题，和刷新，获取URL等属性得方法，js同步和异步
初学者写下得笔记，如有错误，欢迎前来指正

BOM浏览器对象模型

BOM：浏览器对象模型，例如刷新，后退等操作
BOM 兼容性较差
BOM顶级对象是 window
BOM 浏览器窗口进行交互的一些对象

window 对象

BOM构成：

在这里插入图片描述

他是 js 访问浏览器窗口的一个接口
他是一个全局对象，定义在全局作用域中的变量或者函数都会变成 window 对象的属性和方法 (在调用时可以省略window)
alert 也是 window 的方法，完整写法 (window.alert)
window 下面有一个特殊属性 window.name (所以声明变量时不要用 name 作为变量名，即使他不是关键字)

window 对象常用事件

窗口加载事件：window.onload = function() {} 或者 window.addEventListener('load',function() {})
窗口加载事件是在文档内容完全加载后在调用这个事件
使用场景：之前的 script 必须写在网页的最下面，这里我们可以把原来的代码放在这个事件里，我们就可以随心所欲的把 script标签移动到任何地方
传统的 window.onload 只能写一次，否则后面的会把前面的覆盖掉，所以推荐window.addEventListener方式

窗口加载事件：document.addEventListener('DOMcontentLoaded',function() {})
DOMcontentLoaded 在DOM加载完成触发，不包括样式表(css)，图片，flash等
兼容性：IE9以上支持
因为不需要等到加载图片等就可以完成，所以速度要比 onnload 快

调整窗口大小事件

调整窗口大小事件：window.onresize 或者 window.addEventListener('resize',function() {})
当窗口大小发生改变时就触发这个事件
应用于响应式布局
window.innerWidth 获取当前屏幕宽度，和上面来一起使用，应用于响应式布局

定时器

定时器分为两种 setTimeout() 和 setInterval()

定时器之 setTimeout()

使用格式：window.setTimeout(调用函数, [延迟的毫秒数])
在延迟毫秒数之后调用函数
window 在使用时可以省略
代码示例：

// 2秒钟后调用前面的 function 函数
setTimeout(function() {
   }, 2000);
// 还有一种写法 (不提倡)
setTimeout('函数名()', 3000);

一个页面上可能有多个不同的定时器，为了区分他们，我们给定时器加标志符

// 现在就有两个不同的定时器
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

回调函数

正常函数都是根据代码顺序进行的，回调函数是运行到某个地方，回头调用这个函数
例如计时器里的函数，或者注册事件里的函数都是回调函数

案例：自动关闭的广告

打开页面显示一个广告，5秒后自动关闭广告
代码示例：

<style>
  .Ad {
    
    height: 200px;
    width: 200px;
    background-color: pink;
    text-align: center;
    line-height: 200px;
    font-size: 25px;
    font-weight: 700;
  }
</style>
<body>
  <div class="Ad">我是广告！</div>
  <script>
    var Ad = document.querySelector('.Ad');
    function disable() {
    
        Ad.style.display =

最低0.47元/天解锁文章

菜鸟小铭

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript WebAPI学习 demo7

JavaScript WebAPI学习这篇笔记主要讲了窗口大小事件，两种定时器，this指向得问题，和刷新，获取URL等属性得方法，js同步和异步初学者写下得笔记，如有错误，欢迎前来指正BOM浏览器对象模型BOM：浏览器对象模型，例如刷新，后退等操作BOM 兼容性较差BOM顶级对象是 windowBOM 浏览器窗口进行交互的一些对象window 对象BOM构成：他是 js 访问浏览器窗口的一个接口他是一个全局对象，定义在全局作用域中的变量或者函数都会变成 window
复制链接

扫一扫

专栏目录