Bom 基本使用以及定时器倒计时案例

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 基本使用以及定时器倒计时案例

最新文章

热门文章

巴特西

Bom 基本使用以及定时器 倒计时案例

最新文章

热门文章

Bom 基本使用以及定时器倒计时案例
