JS 窗口加载与定时器笔记

bom浏览器对象模型

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

bom顶级对象是window

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

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

窗口加载事件

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

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

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

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

 1  <button>点击</button>
 2 window.onload = function () {
 3             var btn = window.document.querySelector('button')
 4             btn.onclick = function () {
 5                 alert('ok')
 6             }
 7         }
 8         window.addEventListener('load', function () {
 9             var btn = window.document.querySelector('button')
10             btn.onclick = function () {
11                 alert('ok')
12             }
13         })

调整窗口大小事件

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

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

1  <div class="box">123</div>
2   var box = document.querySelector('.box')
3         window.addEventListener('resize', function () {
4             if (window.innerWidth <= 800) {
5                 box.style.display = 'none'
6             } else {
7                 box.style.display = 'block'
8             }
9         })

两种定时器

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

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

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

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

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

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

 1  setTimeout(function () {
 2             console.log('ok');
 3 
 4         }, [2000])
 5 
 6 
 7         function fn() {
 8             console.log('okk');
 9         }
10         var times1 = setTimeout(fn, 3000)
11         var times2 = setTimeout('fn()', 3000)

案例

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

停止setTimeout()定时器

window.clearTimeout(定时器的名称)

案例

1  <button class="btn">点击</button>
2 var btn = document.querySelector('.btn')
3         var times = setTimeout(function () {
4             console.log('lll');
5 
6         }, 6000)
7         btn.addEventListener('click', function () {
8             clearTimeout(times)
9         })

 1 <button class="begin">开启</button>
 2     <button class="stop">停止</button>
 3 var begin = document.querySelector('.begin')
 4         var stop = document.querySelector('.stop')
 5         var times = null;
 6         begin.addEventListener('click', function () {
 7             times = setInterval(function () {
 8                 console.log('你好吗');
 9             }, 1000)
10         })
11         stop.addEventListener('click', function () {
12             clearTimeout(times)
13         })

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

方法和setTimeout十分相同

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

案例

 1 <div class="box2">
 2         <span class="hour">1</span>
 3         <span class="minute">2</span>
 4         <span class="second">3</span>
 5     </div>
 6         var hour = document.querySelector('.hour')
 7         var minute = document.querySelector('.minute')
 8         var second = document.querySelector('.second')
 9         var inputTime = +new Date('2020-4-9 18:00:00')
10 
11         conutDown() //先调用一次防止第一次刷新页面有空白
12 
13         // 开启定时器
14         setInterval(conutDown, 1000)
15 
16         function conutDown() {
17             var nowTime = +new Date()
18             var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
19             var d = parseInt(times / 60 / 60 / 24) //天
20             d = d < 10 ? '0' + d : d;
21             var h = parseInt(times / 60 / 60 % 24) //时
22             h = h < 10 ? '0' + h : h;
23             hour.innerHTML = h;
24             var m = parseInt(times / 60 % 60) //分
25             m = m < 10 ? '0' + m : m;
26             minute.innerHTML = m;
27             var s = parseInt(times % 60) //秒
28             s = s < 10 ? '0' + s : s;
29             second.innerHTML = s;
30         }

来源：https://www.cnblogs.com/xf2764/p/12658590.html

标签

var

定时器

queryselector