javascript
js定时器
- setInterval( 函数, 时间);可识别最小帧数14 ,每xx时间执行一次这个函数, 循环执行多次
- setTimeout( 函数 , 时间);xx时间之后执行这个函数
- clearInterval( );
- clearTimeout( );
- 全局对象window上的方法, 内部函数this指向window
DOM基本操作
查看滚动条的滚动距离
- window.pageXOffset/ pageYOffset
- document.body/ documentElement .scrollLeft/scrollTop
- 兼容性比较昏乱, 用时取两个值相加, 因为不可能存在两个同时有值
- 封装兼容方法, 求滚动轮滚动距离getScrollOffset()
function getScrollOffset() {
if(window.pageXOffset){
return{
x: window.pageXOffset,
y: window.pageYOffset
}
}else{
return{
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
查看视口的尺寸
- window.innerWidth/innerHeight
- document.documentElement.clientWidth/clientHeight
- document.body.clientWidth/clientHeight
- 封装方法, 返回浏览器视口尺寸getViewportOffset( )
function getViewportOffset() {
if(window.innerWidth && 0){
return{
w: window.innerWidth,
h: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return{
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}else{
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
}
}
让滚动条滚动
- window上有三个方法
- scroll( ), scrollTo( ), scrollBy( );
- 三个方法功能类似, 用法都是将x, y坐标传入. 即实现让滚动条滚动到当前位置
- 区别: scrollBy( )会在之前的数据基础上做累加
查看元素的几何尺寸
- 标签.getBoundingClientRect( );
- 兼容性很好
- 该方法返回一个对象, 对象里面有left, top, right, bottom等属性. left和top代表该元素左上角的x和y坐标, right和bottom代表元素右下角的x和y坐标
- height和width属性老版本IE并未实现
- 返回的结果并不是"实时的"
查看元素的尺寸
- dom.offsetWidth, dom.offsetHeight
查看元素的位置
- dom.offsetLeft, dom.offsetTop
- 对于无定位父级的元素, 返回相对于文档的坐标. 对于有定位父级的元素, 返回相对于最近的有定位的父级的坐标.
- dom.offsetParent
- 返回最近的有定位的父级, 如无, 返回body, body.offsetParent返回null
- eg: 求元素相对于文档的坐标getElementPosition( )
