BOM------计时器和动画

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";//占位
//
//    };

8.    //设置鼠标移动的时候文字不被选中
        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();//阻止浏览器的默认事件