JS 窗口加载与定时器笔记

bom浏览器对象模型

bom由一系列相关的对象构成并且每个对象都提供了很多方法属性

bom顶级对象是window

bom是浏览器产商在各自浏览器上定义的，兼容性差

window具有双重角色,他是一个全局对象.定义在全局作用域中的变量、函数都会变成window对象的属性和方法,但是在调用的时候可以省略window

窗口加载事件

window.onload当前页面文档加载完成后会触发该事件,在页面中只能写一次,如果有多个就以最后一个为准

可以换成window.addEventListener('load',function(){})则没有限制

如果网页中图片特别多可以用document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded是DOM加载完毕,不包含图片,falsh,css等就可以执行加载速度比load快一些

  <button>点击</button>
 window.onload = function () {
             var btn = window.document.querySelector('button')
             btn.onclick = function () {
                 alert('ok')
             }
         }
         window.addEventListener('load', function () {
             var btn = window.document.querySelector('button')
             btn.onclick = function () {
                 alert('ok')
             }
         })

调整窗口大小事件

window.onresize=function(){} 只要窗口大小发生了变化就会触发该事件

window.addEventListener('resize',function(){})

  <div class="box">123</div>
   var box = document.querySelector('.box')
         window.addEventListener('resize', function () {
             if (window.innerWidth <= 800) {
                 box.style.display = 'none'
             } else {
                 box.style.display = 'block'
             }
         })

两种定时器

window.setTimeout(调用函数,[延迟的毫秒数])

这个window在调用的时候可以省略

这个延迟单位是毫秒默认就是0

这个调用函数可以直接写函数还可以写函数名还有一种方法是setTimeout('fn()', 3000)但是不提倡

页面中有很多的定时器我们可以给定时器加标识符

setTimeout这个函数也叫回调函数callback

注意

　如果页面中有多个定时器在循环使用如果不去除会导致定时器越来越多

  setTimeout(function () {
             console.log('ok');
 
         }, [2000])
 
         function fn() {
             console.log('okk');
         }
         var times1 = setTimeout(fn, 3000)
         var times2 = setTimeout('fn()', 3000)

     var t = 3000;
     fn1()
     function fn1() {
         imgs[0].style.display = 'block'
         imgs[1].style.display = 'none'
         imgs[2].style.display = 'none'
         times1 = setInterval(fn2, t)
　　　　　　 clearInterval(times3)
     }
 
     function fn2() {
         imgs[0].style.display = 'none'
         imgs[1].style.display = 'block'
         times2 = setInterval(fn3, t)
         clearInterval(times1)
     }
 
     function fn3() {
         imgs[0].style.display = 'none'
         imgs[1].style.display = 'none'
         imgs[2].style.display = 'block'
         times3 = setInterval(fn1, t)
         clearInterval(times2)
     }
 
 })

案例

  <!-- 五秒之后自动关闭广告 -->
     <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt="" class="ad">
         var ad = document.querySelector('.ad')
         setTimeout(function () {
             ad.style.display = 'none'
         }, 5000)

效果图

停止setTimeout()定时器

window.clearTimeout(定时器的名称)

案例

  <button class="btn">点击</button>
 var btn = document.querySelector('.btn')
         var times = setTimeout(function () {
             console.log('lll');
 
         }, 6000)
         btn.addEventListener('click', function () {
             clearTimeout(times)
         })

 <button class="begin">开启</button>
     <button class="stop">停止</button>
 var begin = document.querySelector('.begin')
         var stop = document.querySelector('.stop')
         var times = null;
         begin.addEventListener('click', function () {
             times = setInterval(function () {
                 console.log('你好吗');
             }, 1000)
         })
         stop.addEventListener('click', function () {
             clearTimeout(times)
         })

效果图

window.setInterval(调用函数,[延迟的毫秒数])

方法和setTimeout十分相同

每隔这个延迟时间就去调用这个回调函数,会调用很多次,重复调用这个函数

案例

 <div class="box2">
         <span class="hour">1</span>
         <span class="minute">2</span>
         <span class="second">3</span>
     </div>
         var hour = document.querySelector('.hour')
         var minute = document.querySelector('.minute')
         var second = document.querySelector('.second')
         var inputTime = +new Date('2020-4-9 18:00:00')
 
         conutDown() //先调用一次防止第一次刷新页面有空白
 
         // 开启定时器
         setInterval(conutDown, 1000)
 
         function conutDown() {
             var nowTime = +new Date()
             var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
             var d = parseInt(times / 60 / 60 / 24) //天
             d = d < 10 ? '0' + d : d;
             var h = parseInt(times / 60 / 60 % 24) //时
             h = h < 10 ? '0' + h : h;
             hour.innerHTML = h;
             var m = parseInt(times / 60 % 60) //分
             m = m < 10 ? '0' + m : m;
             minute.innerHTML = m;
             var s = parseInt(times % 60) //秒
             s = s < 10 ? '0' + s : s;
             second.innerHTML = s;
         }

效果图