一周知识总结（常用封装函数总结）

一、常用封装函数

1、获取一个标签到body顶端的距离

function getTop(obj) {
    var iTop = 0;
    while(obj) {
      iTop += obj.offsetTop;
      obj = obj.offsetParent;//当找不到父节点时为null
    }
    return iTop;
  }

2、以几个li为例，找高度最小的li

function getShort() {
    var index = 0;
    var ih = aLi[index].offsetHeight;
    for (var i=1; i<iLen; i++) {
      if ( aLi[i].offsetHeight < ih ) {
        index = i;
        ih = aLi[i].offsetHeight;
      }
    }
    return index;
  }

3、获取cookie中的key值

function getCookie(key) {
  var arr1 = document.cookie.split('; ');
  for (var i=0; i<arr1.length; i++) {
    var arr2 = arr1[i].split('=');
    if (arr2[0]==key) {
      return arr2[1];
    }
  }
}

4、设置cookie值

function setCookie('key','value',t){
var oDate = new Date();
oDate.setDate(oDate.getDate() + t);
document.cookie = key +'='+ 'value'+; exprise='+oDate.toGMTString();
}

5、获取元素的属性值（计算机计算后的）//注意是带单位的

function getStyle(obj, attr) {
    if (obj.currentStyle) {
      return obj.currentStyle[attr];
    } else {
      return getComputedStyle(obj, false)[attr];
    }
  }

function getStyle(obj, attr) {
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}

6、运动函数封装

function startMove(obj, attr, iTarget, iSpeed) {
    clearInterval(obj.iTimer);
    var iCur = 0;
      
    obj.iTimer = setInterval(function() {
      
      if (attr == 'opacity') {
        iCur = Math.round(css( obj, 'opacity' ) * 100);
      } else {
        iCur = parseInt(css(obj, attr));
      }
      
      if (iCur == iTarget) {
        clearInterval(obj.iTimer);
      } else {
        if (attr == 'opacity') {
          obj.style.opacity = (iCur + iSpeed) / 100;
          obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
        } else {
          obj.style[attr] = iCur + iSpeed + 'px';
        }
      }
      
    }, 30);
  }

有小数精度问题

//alert( 0.1 + 0.2 ); //0.3 -> 0.300000000004
//alert(0.2 + 0.7); //0.9 -> 0.89999999999

//近似值 = 可能比正确要小，也可以要比正确要大
//近似值 进行四舍五入以后就可以得到 正确值

我么知道透明度，在IE下是filter：alpha('opacity= 30')此时opacity的取值范围为0-100，而在其他浏览器中时使用的是opacity:0.3取值范围是0-1，因为有小数精度问题，所以我们在处理兼容性问题的时候尽量先统一按0-100，然后再转换

7、缓冲运动函数封装

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;     
    obj.iTimer = setInterval(function() { 
      var iBtn = true;          
      for ( var attr in json ) {
                
        var iTarget = json[attr];
        
        if (attr == 'opacity') {
          iCur = Math.round(css( obj, 'opacity' ) * 100);
        } else {
          iCur = parseInt(css(obj, attr));
        }       
        iSpeed = ( iTarget - iCur ) / 8;//此处为缓冲处理，距离目标距离越近，速度越慢
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//当目标距离比初始距离大时，向上取整，当目标距离比初始距离小时，上下取整
        
        if (iCur != iTarget) {
          iBtn = false;
          if (attr == 'opacity') {
            obj.style.opacity = (iCur + iSpeed) / 100;
            obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
          } else {
            obj.style[attr] = iCur + iSpeed + 'px';
          }
        }       
      }     
      if (iBtn) {
        clearInterval(obj.iTimer);
        fn && fn.call(obj);
      }     
    }, 30);
  }
  
  function css(obj, attr) {
    if (obj.currentStyle) {
      return obj.currentStyle[attr];
    } else {
      return getComputedStyle(obj, false)[attr];
    }
  }

8、ajax函数封装

function ajax(method, url, data, success) {
  var xhr = null;
  try {
    xhr = new XMLHttpRequest();
  } catch (e) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  
  if (method == 'get' && data) {
    url += '?' + data;
  }
  
  xhr.open(method,url,true);
  if (method == 'get') {
    xhr.send();
  } else {
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  }
  
  xhr.onreadystatechange = function() {
    
    if ( xhr.readyState == 4 ) {
      if ( xhr.status == 200 ) {
        success && success(xhr.responseText);
      } else {
        alert('出错了,Err：' + xhr.status);
      }
    }
    
  }
}

9、找最小值和位置

<script>
   var arr=[123,778,220.333,293,9,32,322];
   var value = 9999;
   var index = -1;
   for(var i=0; i<arr.length; i++){
     if(arr[i]<value){
         value = arr[i];
         index = i;
     }
   }
   console.log('最小值：'+value+'位置：'+index);
</script>

10、碰撞检测

function pz(obj1,obj2){
    var L1 = obj1.offsetLeft;
    var R1 = obj1.offsetLeft + obj1.offsetWidth;
    var T1 = obj1.offsetTop;
    var B1 = obj1.offsetTop + obj1.offsetHeight;
    
    var L2 = obj2.offsetLeft;
    var R2 = obj2.offsetLeft + obj2.offsetWidth;
    var T2 = obj2.offsetTop;
    var B2 = obj2.offsetTop + obj2.offsetHeight;
    
    if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
      return false;
    }
    else{
      return true;
    }
    
  }