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. mysql之join浅析

    1.可以使用join吗?使用join有什么问题呢?-- >超过3个表不使用join,笛卡尔积问题 -->这些问题是怎么造成的呢? 如果可以使用 Index Nested-Loop Join ...

  2. class.getName()和class.getSimpleName()的区别

    根据API中的定义: Class.getName():以String的形式,返回Class对象的"实体"名称: Class.getSimpleName():获取源代码中给出的&qu ...

  3. feignclient发送get请求，传递参数为对象

    feignclient发送get请求,传递参数为对象.此时不能使用在地址栏传递参数的方式,需要将参数放到请求体中. 第一步: 修改application.yml中配置feign发送请求使用apache ...

  4. pop和push等使用方法,every和some、join

    push  在最前面添加一个元素 pop  移除最后一个元素 shift  移除第一个元素 unshift  放入一个元素,且排在最前 arr.splice(2,2)//移除从指定下标 slice(2 ...

  5. Hibernate的基本功能：对数据库的增删改查（创建对象实例）

    一.通过实例化的对象向数据库添加新记录 package com.yh.test; import org.hibernate.Session; import org.hibernate.SessionF ...

  6. 关于使用Topshelf创建服务

    目录 0. 背景说明 1. 使用Topshelf组件创建Windows服务 1.1 依赖Quartz.net实现定时任务 1.2 依赖于Topshelf创建服务类 1.3 log4net的配置文件lo ...

  7. Python绘制饼图

    Python绘制饼图 1.1 对应代码如下图所示 import matplotlib.pyplot as pltfrom pylab import mplmpl.rcParams['font.sans ...

  8. C# 扫描识别图片中的文字（.NET Framework）

    环境配置 本文以C#及VB.NET代码为例,介绍如何扫描并读取图片中的文字. 本次程序环境如下: Visual Studio版本要求不低于2017 图片扫描工具:Spire.OCR for .NET ...

  9. Hive实战UDF 外部依赖文件找不到的问题

    目录 关于外部依赖文件找不到的问题 为什么要使用外部依赖 为什么idea 里面可以运行上线之后不行 依赖文件直接打包在jar 包里面不香吗 学会独立思考并且解决问题 继承DbSearcher 读取文件 ...

  10. 【译】使用 Visual Studio 调试外部源代码

    您是否曾经需要调试并进入依赖于 NuGet 或 .NET 库的代码,而这些库并没有构建为您的解决方案的一部分? 现在,调试它们并不像调试作为解决方案一部分的项目那么容易.从 Visual Studio ...