day9（2017.10.23）

经典的函数封装

点击div随机改变颜色

//js
        var div = document.getElementsByTagName('div')[0];
        function randomNum(a){
            str = "#";
            for(var i=0;i<6;i++){
                str += Math.round(Math.random()*a).toString(16) 
                //Math.round(Math.random()*a)获取一个随机数 //toString(16)转换成16进制
                //Math.round(0.6)获取四舍五入的整数//Math.random()获取0~1之间的随机数
            }
            return str;
        }
        div.onclick = function(){
            console.log(randomNum(16))
            div.style.background = randomNum(16);
        }

递归求斐波那契数列

//js
//斐波那契数列  第三项等于前两项的和
//1，1，2，3，5，8，13，21，34，55，89，144....
        function feibo(n){
            if(n==1){
                return 1;
            }
            if(n==2){
                return 1;
            }
            return feibo(n-1)+feibo(n-2);
        }
        console.log(feibo(8));  //21

bom操作location.search获取地址栏

//js
function getPara(paraName){
    if(location.search.indexOf("?") == -1){  
       return;
    }
    var str = location.search.slice(1);  //获取地址栏并且去掉？
    str = str.replace(/&/g,"\",\"");   //将&替换成，
    str = str.replace(/=/g,"\":\"");  // 将=替换成：
    str = "{\""+str+"\"}"   //字符串拼接
    return JSON.parse(str)[paraName];  //JOSN.parse()将字符串转为对象
}

DOM2级事件添加封装函数

//js
function addEvent(obj,event,fun){
      if(obj.addEventListener){  //兼容IE意外的浏览器  this指向对象
            obj.addEventListener(event,fun,false);  //点三个参数false表示事件是冒泡模型  true表示事件是捕获模型
      }else if(obj.attachEvent){  //IE浏览器   this指向window
            obj.attachEvent("on"+event,function(){
                fun.call(obj);   //call能在调用函数的时候改变this指向
            });  //不需要第三个参数，IE的事件模型是冒泡事件
       }else{
            obj["on"+event];//DOM一级事件  兼容任何浏览器
      }

}

DOM2级事件移除封装函数

//js
function removeEvent(obj,event,fun){
            if(obj.removeEventListener){  //兼容IE意外的浏览器
                obj.removeEventListener(event,fun,false);  //点三个参数false表示事件是冒泡模型  true表示事件是捕获模型
            }else if(obj.detachEvent){  //IE浏览器
                obj.detachEvent("on"+event,function(){
                    fun.call(obj);
                });  //不需要第三个参数，IE的事件模型是冒泡事件
            }else{
                obj["on"+event] = null; //DOM一级事件  兼容任何浏览器
            }

        }

阻止事件冒泡

//js
function preventBubble(ev){   //阻止事件冒泡
      console.log(event)
      var e = ev||event;
      if(e.stopPropagation){  //标准浏览器
            e.stopPropagation();
      }else{
            e.cancelBubble = true;  //IE
      }
}

阻止默认行为

//js
         var a = document.getElementsByTagName('a')[0];
         a.onclick = function(){
            if(!confirm("确定去百度吗？")){
                prevent();
            }
         }
         function prevent(ev){
            var e = ev||event
            if(e.preventDefault){
                e.preventDefault()  //阻止默认行为  标准浏览区
            }else{           //IE
                e.returnValue = false;
            }
         }

元素移动封装函数

//js
 function move(obj,target){
       clearInterval(obj.timer);  //保证一个时刻只开启一个定时器
       obj.timer = setInterval(function(){
        //速度是正值向上取整 速度是负值向下取整
       var speed=(target-obj.offsetLeft)/10;
       if(speed>0){
               speed=Math.ceil(speed);
        }
        else{
                  speed=Math.floor(speed);
        }
        obj.style.left=(obj.offsetLeft+speed)+"px";
        if(obj.offsetLeft==target){ //到达目标点就停止
                  clearInterval(obj.timer);
        }
        },30);
 }

//js
            function move(obj,attrObj){
            clearInterval(obj.timer);  //清除定时
            obj.timer = setInterval(function(){
                flag = true
                for(var x in attrObj){
                    var icur = parseInt(getStyle(obj,x));   //获取对象当前位置
                    if(attrObj[x] != icur){
                        flag = false;
                    }
                    var speed = (attrObj[x]-icur)/10;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);  //速度取整
                    obj.style[x] = icur + speed + "px";
                }
                if(flag){
                    clearInterval(obj.timer);  //到达终点目标 清除定时器  不然定时器一直在计时  提升性能
                }
            },30);
         }

获取内容的宽度的函数封装

//js
         function getStyle(obj,attr){
            if(obj.currentStyle){   //IE
                return obj.currentStyle[attr]
            }else{  //标准浏览器
                return getComputedStyle(obj,null)[attr]
            }
         }