BOM以及定时器

Posted 2020-08-14

一、BOM

1、操作浏览器的一些方法 （浏览器对象模型）

2、window是is中的顶级变量，是一个全局的变量，所有人都可以访问到它，基本 的方法和属性

（document,alert,console.log，这些东西都是window的），由于他太常用可以省略不写，全局变 量和全局函数是window的一个属性和方法

 

3、window.onload=function(){ 【入口函数】

事件会在页面加载完成后,以及页面中的所有图片都加载完才开始执行

} img标签会加载，而图片不会被加载，是为了优化，这样获取图片的属性就不可以，所以

要使用window.load()

3‘使用：当在单独的页面写JS时 会比较常使用

window.load如果写了多个 ，后面的会覆盖前边的

3‘‘ window.open("打开的窗口地址"，“-self/-blank（默认）”，“窗口的属性（高度和宽 度）”)--》可以写在一个函数里--》但是这个很少用

window.close(没有参数)--》把自己给关了，所有在open的时候要在全局接受一下设定的窗口 ，然后用它来调用.close就可以。

 

4、定时器

①延时定时器

语法：setTimeout(函数function，delay【单位是毫秒】)

setTimeout(funnction(){},5000) //5秒之后去执行这里的函数，并返回一个数值类型的延时定时器的ID，可以用、timer来接收

setTimeout(bang【函数名】,5000)

clearTimeout( timer【定时器的ID】); -->他们都是windom来调用的

②间歇定时器

setInterval(函数function,delay) 同样返回一个ID //每隔一段时间都会调用这个函数

clearInterval(timer)

 

定时器不会卡住程序，他后边的程序还是可以执行的，单线程先是执行他下边的程序，然后等执行定时器时，就会一直执行。

惊天巨坑：在定时器里不要使用this,因为定时器是有window来调用的

定时器实质：设置一个定时器，就是让window没隔多少秒去执行一次，他后边 的代码不会再执行了，开启一个定时器，不会妨碍后边代码的执行，其实就是让代码每隔多少秒去执行一次

 

5、其他的BOM对象（了解）

① location.href="http://baidu.com" //用来页面跳转

②刷新 ： 刷新的时候，地址没变，浏览器会读缓存

强制刷新 ： ctrl+f5 不读缓存 ，所有的资源都重新去加载

 

location.reload(true/false) //默认不写就是false就是刷新，传的是true就是强制刷新

③其他属性

通过IP找电脑，通过端口找程序

http://www.baidu.com?wd=呵呵 找关键字

 

6、其他对象

① navigator console.log(navigatorr.userAgent)//在控制台中写，（编辑器在前加window） 查看浏览器的版本信息

浏览器兼容性： 能力检测：判断有没有这个能力，如果没有，就用另外一种方式

代理检测：检查浏览器的版本 （谷歌浏览器可以再控制台中编程）

②history.forward( )等页面跳转完，有历史时，往前跳 ==history.go(1)

history.back( )往后==history.go(-1)

 

③screen.width/height 获取屏幕的宽度和高度

screen.availWidth/availHeight 高度会变（默认 ）

7、动画

offset家族

①style.width:只能获取行内式

获取的是字符串的格式，还带px，如还的用parseInt

可以设置宽度，记得带单位

offsetwidth：真是的大小，获取盒子自身的宽度(padding+border+width)

获取的类型是字符类型，可以直接运算

是一个只读属性，只能获取，不能设置

总结：获取用offsetWidth 设置用style.width

 

②offsetParent 距离自己最近的有定位的父元素

parentNode 找的永远是自己的亲爹

③offsetTop offsetLeft//真实的位置 自己的左侧距离offsetParent左侧的

真实的距离 ；获取到的是字符类型；是只读属性

只能获取不能设置；margin会影响他的大小。

style.left:只能获取行内样式 （获取的是left设置的样式值，就是设多少就是多

少）；获取到的是字符串 ；可以进行设置

 

动画公式

注意：动画中，想让left有效果，别忘记加定位，加单位

对象的当前位置=对象的当前位置+对象要走的长度

leader=leader+step // 当前的位置 盒子一次移动的距离

注意：一秒钟执行25次就可以看到动画效果

timer只是定时器的编号，是个数值而已