• 【JavaScript-BOM】window常见事件,灵活运用定时器

    CSDN话题挑战赛第2期
    参赛话题：面试宝典

    • 💂 个人主页：Aic山鱼 

    •  个人社区：山鱼社区

    • 💬 如果文章对你有帮助
    • 欢迎关注、点赞、收藏(一键三连)和订阅专栏

    目录

    前言

    window常见事件

    1.窗口加载事件

    1.1window.onload

    1.2DOMContentLoaded

    2.调整窗口大小

    3.定时器

    3.1setTimeout

    3.2 setInterval应用

    3.3利用clearTimeout实现清楚定时器

    3.4利用clearTimeout实现验证码操作

    前言

    什么是BOM

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

    ​​

     ​

    BOM包含DOM,BOM中window最大，window又包含着document

    window对象是浏览器的顶级对象,它具有双重角色。

    1.它是JS访问浏览器窗口的一个接口。

    2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。 在调用的时候可以省略window ,前面学习的对话框都属于window对象方法,如alert()、prompt()等。 注意: window下的一个特殊属性window.name

    window常见事件

    1.窗口加载事件

    1.1window.onload

    window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等),就调用的处理函数。

    ​

    注意：

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

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

    3. 用监听的方法就不会出现这些问题

    1.2DOMContentLoaded

    DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片, flash等等。 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间，交互效果就不能实现,必然影响用 户的体验,此时用DOMContentl oaded事件比较合适。

    2.调整窗口大小

    window. onresize, window.addEventListener('resize', function () {}

    只要窗口大小发生像素变化,就会触发这个事件。 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

    1. <script>
    2.  
    3.         window.addEventListener('load', function () {
    4.             var div = document.querySelector('div');
    5.             window.addEventListener('resize', function () {
    6.                 if (window.innerWidth <= 800) {
    7.                     div.style.display = 'none';
    8.                 } else {
    9.                     div.style.display = 'block';
    10.                 }
    11.             })
    12.         })
    13.  
    14.     script>
    15.     <div>div>

    3.定时器

    3.1setTimeout

    setTimeout0方法用于设置-个定时器,该定时器在定时器到期后执行调用函数。（类似于定时炸弹）

    1.  <script>
    2.         // 这个window在调用的时候可以省略
    3.         // 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0 
    4.         // 方法一
    5.         setTimeout(function () {
    6.             alert('pong!');
    7.         }, 3000)
    8.         // 方法二 这个调用函数可以直接写函数还可以写函数名
    9.         function callback() {
    10.             alert('爆炸啦！');
    11.         }
    12.         setTimeout(callback, 3000);
    13.     script>

    3.2 setInterval应用

    1. <body>
    2.     <img src="./img/山鱼妹.jpg" alt="">
    3.     <script>
    4.         var img = document.querySelector('img');
    5.         setTimeout(function () {
    6.             img.style.display = 'none';
    7.         }, 2000)// 两秒后关闭广告
    8.         console.log(setTimeout.length);
    9.     script>

    3.3利用clearTimeout实现清楚定时器

    1. <body>
    2.     <button class="start">开启计时器button>
    3.     <button class="end">关闭计时器button>
    4.     <script>
    5.         var buts = document.querySelector('.start');
    6.         var bute = document.querySelector('.end');
    7.         var timer = null;
    8.         buts.addEventListener('click', function () {
    9.             timer = setInterval(function () {
    10.                 console.log('开启计时器');
    11.             }, 1000)
    12.         })
    13.         bute.addEventListener('click', function () {
    14.             clearInterval(timer);
    15.         })
    16.     script>
    17. body>

    3.4利用clearTimeout实现验证码操作

    1. <body>
    2.     手机号码：<input type="text"> <button>点击发送button>
    3.     <script>
    4.         var but = document.querySelector('button');
    5.         var timee = 2;
    6.         but.addEventListener('click', function () {
    7.             but.disabled = true;
    8.             var tim = setInterval(function () {
    9.                 if (timee == 0) {
    10.                     clearInterval(tim);
    11.                     but.disabled = false;
    12.                     but.innerHTML = '点击再次发送';
    13.                     timee = 2;
    14.                 } else {
    15.                     but.innerHTML = timee;
    16.                     timee--;
    17.                 }
    18.             }, 1000)
    19.         })
    20.     script>

    ​​​​​​​写在最后​

    点赞👍：您的赞赏是我前进的动力！
    收藏⭐：您的支持我是创作的源泉！
    评论✍：您的建议是我改进的良药！
    山鱼🦈社区:欢迎大家加 山鱼社区！ 

  • 相关阅读:
    Apache Doris 发展历程、技术特性及云原生时代的未来规划
    pandas|Task03索引
    编程参考 - 编程中给变量起名时如何选择前缀，以及匈牙利命名法等
    下载离线地图地形数据库（3D离线地图开发）
    在Bash中如何提取子字符串
    群晖 Docker版qbittorrent 下载显示错误 解决方法
    21天学Python --- 打卡3: Python && Json
    Ansible中的任务执行控制
    云上“两地三中心”，中小企业都用得起的多保险灾备方案
    Flutter dio上传大文件时应用内存不足问题解决
  • 原文地址：https://blog.csdn.net/zhaochen1127/article/details/126928220