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

窗口加载事件

注意：window.onload 就可以吧JS代码写在页面元素的上方，因为onload是等页面内容全部加载完毕，在执行处理函数

传统方式，只能写一次，如果有多个，将以最后一个为准，覆盖之前的。addEventListener这种方式的不受影响的

1.传统的

window.onload = function(){

    //获取元素

    //触发事件

   //执行动作

}

2.最新方式

window.addEventListener('load',function(){

   //获取元素

    //触发事件

   //执行动作

})

//例如：

window.addEventListener('load',function(){

       var btn = document.querySelector('button');

       btn.addEventListener('click',function(){

              alert('点击')；

})

})

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

      alert('你好')

})

load要等页面内容全部加载完毕，包含页面的dom元素，图片 flash css等等

DOMContentLoaded  等Dom元素加载完毕  不包含 图片 falsh css 等就可以执行，加载速度要load快  适用于图片比较大的网站

调整窗口大小事件

window.onresize = function(){}     //只要浏览器窗口发生变化，就会触发事件

例如：

window.addEventListener('load',function(){

      var div  = document.querySelector('div')

      window.addEventListenner('resize',function(){

      if(window.innerWidth <= 800){ // innerWidth 识别屏幕的宽度

              div.style.display= 'none';

          }

      })

})

定时器之 setTimeout

语法格式：window.setTimeout(调用函数 ，延时事件)；

注意：1.window字样可以省略，延时时间单位是毫秒，也可以省略，默认是0

          2.页面中可能有很多定时器，我们可以给定时器加标识符号（起个名）

例如：

1.setTimeout(function(){

    console.log('测试')

},2000);  //2s执行

2.function callback() {

   console.log('爆炸了')

}

setTimeout(callback,3000); // 3s 执行

var timer1 = setTimeout（callback，3000） //定义定时器的名字，多个定时器可同时执行

var timer2 = setTimeout （callback，3000）

回调函数：就是等某一件事件做完，再次调用，比如：定时器、事件对象里面的函数

停止定时器 setTimeout()

clearTimeout(要取消的定时器的函数名字)

如：clearTimeout(timer1)

定时器之setInterval

setInterval（回调函数，间隔多少毫秒）；

注意：1.只要不结束，就一直执行，重复调用函数，类似永动机

          2.注意事项跟setTimeout一样

清除定时clearInterval()

综合：

案例一：（功能：点击开始倒计时则开始，点击暂停倒计时则暂停）

<!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>

    <button class="begin">开始倒计时</button>

    <button class="stop">暂停倒计时</button>

    <script>

        //获取元素

        window.addEventListener('load',function(){

            var begin = document.querySelector('.begin');

            var stop  = document.querySelector('.stop');

            //绑定开始事件

            var  timer=null;

            begin.addEventListener('click',function(){

                timer= setInterval(function() {

                    console.log(1)

                },1000)

            } )

            stop.addEventListener('click',function(){

                clearInterval(timer)

            })

        })

    </script>

</body>

</html>

案例二：（模仿web页面倒计时功能）

<!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 {

            display: flex;

            width: 110px;

            height: 30px ;

        }

         .one,

         .two,

         .three {

             margin-left: 5px;

             width: 30px;

             height: 30px;

             background-color: black;

             color: beige;

             text-align: center;

             line-height: 30px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="one">1</div>

        <div class="two">2</div>

        <div class="three">3</div>

    </div>

    <script>

       //思路： 1.将时间转换成秒,最新时间的秒数减去旧时间的秒数

       //      2. 在将其转换成天、小时、分钟、秒数

       //      3. 在利用定时器

       var one = document.querySelector('.one');

       var two = document.querySelector('.two');

       var three = document.querySelector('.three')

       setInterval(counttime,1000)

       function  counttime(){

        var iNew = new Date()

        var iNow = new Date('2021-12-22 12:00:01')

        var timer = Math.floor((iNow - iNew)/1000)    //

        var  d = parseInt(timer /60 /60 /24);

        one.innerHTML=d;

        var  h = parseInt(timer /60 /60 %24)

        two.innerHTML=h;

        var  s = parseInt(timer %60)

        three.innerHTML=s;

       }

   </script>

</body>

</html>

时间计算公式：

var  d = parseInt(timer /60 /60 /24);

var  h = parseInt(timer /60 /60 %24);

var  m = parseInt(timer /60 %60);

var  s = parseInt(timer %60);

Bom 基本使用以及定时器 倒计时案例的更多相关文章

  1. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

  2. Flutter 快速上手定时器/倒计时及实战讲解

    本文微信公众号「AndroidTraveler」首发. 今天给大家讲讲 Flutter 里面定时器/倒计时的实现. 一般有两种场景: 我只需要你在指定时间结束后回调告诉我.回调只需要一次. 我需要你在 ...

  3. 从零开始学 Web 之 BOM（二）定时器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 黑马JavaScript学习一 BOM之Window对象定时器功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 获取当前时间 和 10s倒计时案例

    1.获取当前的时间,时间没分每秒都在走,(把握现在,将来会是美好的!) <title>获取当前时间</title> <script type="text/jav ...

  6. JavaScript-setInterval-周期性行定时器-倒计时

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Android倒计时案例展示

    1. Handler 与Message方法实现倒计时功能 关于Handler与Message消息机制的原理可查看:Android--Handler使用应运及消息机制处理原理分析 这个设计思路也是最经常 ...

  8. java 24小时倒计时案例

    import java.util.Calendar; import java.util.Date; public class Daojishi { static String Countdown=&q ...

  9. Jquery 定时器 倒计时

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. git 使用https方式进行 pull、push代码免密

    由于网络原因我用ssh方法拉取代码每次都提示远程服务连接失败,因此我用了https方式去拉去代码. 这种方式拉取代码每次操作都要输入密码,为了解决这个问题做了一下操作: 在命令行输入 git conf ...

  2. 如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

    文章前,先聊点啥吧. 最近元宇宙炒的挺火热,在所有人都争相定义元宇宙的时候,资本就开始着手入场了.当定义明确,全民皆懂之后,风口也就过去了. 前两天看到新闻,新世界CEO宣布购入最大的数字地块,这块虚 ...

  3. numpy基础教程--对数组进行水平拼接和竖直拼接

    在处理数组的时候经常要用到拼接,numpy中有两个非常实用的函数,可以快捷对数组进行拼接 1.hstack(tup)函数可以接收维度相同的数组,进行水平拼接. 2.vstack(tup)用来竖直拼接 ...

  4. 在Eclipse中编写jQuery代码时产生的错误（连载）

    1.Error:启动Eclipse中的服务,显示错误,端口号被占用 解决方法: 方式一:修改对应的端口号(实际情况实际处理) 方式二:在进程中关闭Eclispe重新打开即可(截图说明) 2.Error ...

  5. Linux Ubuntu18.04 安装配置 clash

    我最近一段时间在搭建用于构建 Docker 镜像的开发测试环境,这个环境是一台运行于 Windows 笔记本上的虚拟机,其操作系统为 Ubuntu 18.04 .构建场景中经常要去 Github 获取 ...

  6. 模糊C均值算法

    Fuzzy C-Means读书笔记 一.算法简介 很显然,图中的数据集可分为两个簇.借鉴K-Means算法的思想,利用单个特殊的点(质心)表示一个簇.因此,我们用\(C_1\)和\(C_2\)分别表示 ...

  7. [BUUCTF]PWN——[BJDCTF 2nd]secret

    [BJDCTF 2nd]secret 附件 步骤: 例行检查,64位程序,开启了canary和nx 本地试运行一下,看看程序大概的情况,好像是一个什么游戏 64位ida载入,检索程序里的字符串,发现了 ...

  8. [BUUCTF]PWN7——[OGeek2019]babyrop

    [BUUCTF]PWN7--[OGeek2019]babyrop 题目网址:https://buuoj.cn/challenges#[OGeek2019]babyrop 步骤: 例行检查,32位,开启 ...

  9. 保留重复项（Power Query 之 M 语言）

    数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...

  10. Data truncation: Truncated incorrect DOUBLE value错误的解决方案

    Data truncation: Truncated incorrect DOUBLE value错误的解决方案: 当在修改某条单位记录时,发生了Data truncation: Truncated ...