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. When do we use Initializer List in C++?

    Initializer List is used to initialize data members of a class. The list of members to be initialize ...

  2. Classs类

    Classs类如何获得 获得Class对象 方式一: 通过Object类中的getClass()方法 方式二: 通过 类名.class 获取到字节码文件对象( 方式三: 通过Class类中的方法(将类 ...

  3. SprignBoot整合Spring Data Elasticsearch

    一.原生java整合elasticsearch的API地址 https://www.elastic.co/guide/en/elasticsearch/client/java-api/6.2/java ...

  4. 【Spring Framework】Spring入门教程（七）Spring 事件

    内置事件 Spring中的事件是一个ApplicationEvent类的子类,由实现ApplicationEventPublisherAware接口的类发送,实现ApplicationListener ...

  5. 基于docker 操作mysql5.7

    1. 安装好 docker 2. 拉取 mysql5.7 镜像: docker pull mysql:5.7 其他版本 mysql:https://hub.docker.com/_/mysql?tab ...

  6. Docker的常用命令总结

    一.普通指令 启动 Docker sudo systemctl start docker 停止 Docker sudo systemctl stop docker 普通重启 Docker sudo s ...

  7. 13.Vue.js 组件

    组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽 ...

  8. C++内存管理：new / delete 和 cookie

    new 和 delete C++的内存申请和释放是通过 new 和 delete 实现的, 而new 和 delete 其实就是通过 malloc 和 free 实现的. new 申请内存分为三个步骤 ...

  9. 如何推翻JAVA的统治地位

    "java越来越过份了."php狠狠的说,他转头看着C:"C哥,您可是前辈,java最近砸了我不少场子,你老再不出来管管,我怕他眼里就没有您了啊." C哥吸烟, ...

  10. 【划重点】Python pandas简介

    一.pandas获取Excel表单的两种方式 import pandas as pd df1 = pd.DataFrame(pd.read_excel(r'C:\Users\ASUS\Desktop\ ...