首页 > 技术文章 > BOM以及定时器

tm2525 2016-10-15 23:40 原文

一、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只是定时器的编号,是个数值而已

推荐阅读