1.计时器
/**
* BOM中有两个定时器---计时器
*
* 定时器----setInterval();
* 参数一: 函数
* 参数二:时间----毫秒---1000毫秒--1秒
* 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,有过1秒在执行一次。。。。
*
* 清理定时器----- window.clearInterval(定时器Id);
*
* 另一个定时器------一次性定时----setTimeout()
* 参数1:函数
* 参数2:时间
*
* 清理定时器-----clearTimeout(定时器Id);
*/
2.兼容代码-----获取任意一个元素的任意一个样式属性的值
function getStyle(element, attr) {
//判断浏览器支不支持这个方法
if (window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
} else {
return element.currentStyle[attr];
}
}
3.封装动画函数----匀速
//封装动画函数--------设置任意的一个元素,移动到指定的目标位置
function animate(element,target){
//先清理定时器
clearInterval(element.timeId);
//定时器的id值存储在对象的一个属性中
element.timeId=setInterval(function () {
//获取元素的当前位置
var current=element.offsetLeft;
//每次移动的位置
var step=4;
step=current<target?step:-step;
current+=step;
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}
else{
clearInterval(element.timeId);
element.style.left=target+"px";
}
},20)
}
4.封装动画函数-----变速
//封装动画函数--------设置任意的一个元素,移动到指定的目标位置
function animate(element,target){
//先清理定时器
clearInterval(element.timeId);
//定时器的id值存储在对象的一个属性中
element.timeId=setInterval(function () {
//获取元素的当前位置
var current=element.offsetLeft;
//每次移动的位置
var step=4;
step=current<target?step:-step;
current+=step;
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}
else{
clearInterval(element.timeId);
element.style.left=target+"px";
}
},20)
}
5.变速动画封装增加任意多个属性和回调函数及层级和透明度
//封装动画函数--------变速动画封装增加任意多个属性和回调函数及层级和透明度
//@param element----元素;json----对象(键值对)
function animate(element,json,fn) {
//先清理定时器
clearInterval(element.timeId);
//定时器的id值存储在对象的一个属性中
element.timeId = setInterval(function () {
var flag=true;//默认全部达到目标
for(var attr in json) {
if(attr=="opacity"){//获取当前元素的透明度
//获取元素的当前透明度,并放大100倍
var current = getStyle(element, attr)*100;
//目标透明度放大100倍
var target=json[attr]*100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current/100;
}else if(attr=="zIndex"){//获取当前层级
element.style[attr]=json[attr];
}else{//普通元素
//获取元素的当前位置
current = parseInt(getStyle(element, attr));
target=json[attr];
//每次移动的位置
step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
}
if(current!=target){
flag=false;
}
}
if (flag) {
clearInterval(element.timeId);//所有属性全部到达目标时清理定时器
//所有属性到达目标才能使用这个函数,必须有传入的函数
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:" + target + "当前位置:" + current + "移动步数:" + step);
}, 20);
}
//兼容代码-----获取任意一个元素的任意一个样式属性的值----字符串类型
function getStyle(element, attr) {
//判断浏览器支不支持这个方法
if (window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
} else {
return element.currentStyle[attr];
}
}
6.offset,scroll.client系列
/**
*
* offset系列:获取元素的高,宽,left,top
* offsetWidth-----获取元素的宽(有边框)
* offsetHeight-----获取元素的高(有边框)
* offsetLeft-----获取元素距离左边位置的值
* offsetTop-----获取元素距离上边位置的值
*
* scroll系列:卷曲出去的值
* scrollLeft:向左卷曲出去的值
* scrollTop:向上卷曲出去的值
* scrollWidth:元素中内容实际的宽(如果内容很少,没有内容,就是元素自身的高),没有边框
* scrollHeight:元素中内容实际的高(如果内容很少,没有内容,就是元素自身的高),没有边框
*
* client系列:可视区域
* clientWidth:可视区域的宽(没有边框),边框内部的宽度
* clientHeight:可视区域的高(没有边框),边框内部的高度
* clientLeft:左边边框的宽度
* clientTop:上边边框的宽度
*
*/
//兼容代码
function getScroll(){
return {
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
};
}
7.元素隐藏的不同方法
//隐藏元素
// document.getElementById("btn").onclick= function () {
// var dv=document.getElementById("dv");
// //dv.style.display="none";//不占位
// //dv.style.opacity="0";//透明度为0,占位
// //dv.style.height="0";
// //dv.style.border="0";//占位
// //dv.style.visibility="hidden";//占位
//
// };
-
//设置鼠标移动的时候文字不被选中 window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
9.事件处理函数有一个参数,这个参数是一个对象---->事件参数对象
//谷歌和火狐中都有这个事件参数对象,IE8中没有-----在IE8中用window.event来代替
var evt={
//window.event和事件参数对象e的兼容
getEvent: function (e) {
return e||window.event;
},
//可视区域的横坐标的兼容代码
getClientX: function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标的兼容代码
getClientY: function (evt) {
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft: function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop: function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面的横坐标(pageX)
getPageX: function (evt) {
return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft;
},
//相对于页面的纵坐标(pageY)
getPageY: function (evt) {
return this.getEvent(evt).pageX?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop;
}
};
10
//阻止超链接跳转
//return false;
e.preventDefault();//阻止浏览器的默认事件