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. sf02_选择排序算法Java Python rust 实现

    Java 实现 package common; public class SimpleArithmetic { /** * 选择排序 * 输入整形数组:a[n] [4.5.3.7] * 1. 取数组编 ...

  2. JDBC(2)：JDBC对数据库进行CRUD

    一. statement对象 JDBC程序中的Connection用于代表数据库的链接:Statement对象用于向数据库发送SQL语句:ResultSet用于代表Sql语句的执行结果 JDBC中的s ...

  3. 【Keras】神经网络的搭建

    Dense层的使用方法 参考:https://blog.csdn.net/qq_34840129/article/details/86319446 keras.layers.core.Dense( u ...

  4. java的bio和nio写入及读取txt文件

    一.bio的写入及读取 1.采用bio之BufferedWriter 写入文件 public static void main(String[] args) throws IOException { ...

  5. shell脚本 用户登录服务器发送钉钉提醒

    一.企业微信配置 1.获取AgentId(AppID).Secret .CropID.部门ID 创建一个企业微信应用获取到AgentId(AppID).Secret 2.获取CropID,点击 &qu ...

  6. HBuilderX无法启动微信小程序？仅三步

    1.复制微信开发者工具启动路径 : "C:\Program Files (x86)\Tencent\微信web开发者工具\微信web开发者工具.exe" 不要后面的 "微 ...

  7. 建立资源的方法（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 终于,进入第5章资源计划编制了,所以就不能还在任务工作表里厮混了是吧,那就先进入资源工作表吧:[任务]>[甘特图]& ...

  8. CF699A Launch of Collider 题解

    Content 有 \(n\) 辆车在一条数轴上,第 \(i\) 辆车在 \(a_i\) 上,每辆车要么向左,要么向右.开始,它们以 \(1\) 个单位每秒的速度在行驶.问你第一次撞车发生在第几秒的时 ...

  9. tcping和tcpping工具使用

    tcping和tcpping工具 1.工具使用 1.1.windows版tcping 1.2.linux版tcpping 2.B站问题(linux版本tcpping探测ip,且ip无法解析到主机名) ...

  10. Java整合redis报错s if RDB snapshotting fails (stop-writes-on-bgsave-error option)

    Caused by: io.lettuce.core.RedisCommandExecutionException: MISCONF Redis is configured to save RDB s ...