基礎方法封裝匯總

隨機數生產

function randomNum(alls, now) {
  var arr = []
  var Newarr = []
  for (var i = 1; i <= alls; i++) {
    arr.push(i);
  }
  for (var i = 0; i < now; i++) {
    Newarr.push(arr.splice(Math.floor(Math.random() * arr.length), 1))
  }
  return Newarr;
}
randomNum(49,7)

快速排序

function quickSort(arr) {
  if (arr.length <= 1) { //有可能為0
    return arr;
  }
  var num = Math.floor(arr.length / 2) //向下取整，找到中間數
  var numV = arr.splice(num, 1); //找到基準點的數值
  var left = []; //存小於基准點的值
  var right = []; //存大於基準點的值
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] < numV) {
      left.push(arr[i]);
    } 
    else {
      right.push(arr[i]);
    }
  }
  //以上一次操作，下面再利用遞歸原理
  return quickSort(left).concat([numV], quickSort(right));
  //左邊.concat(基准數,右邊)
}
alert( quickSort([30,12,5,6,9,18,57,2]) )

事件綁定

function on(obj, evt, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false)
  } 
  else {
    obj.attachEvent('on' + evt, function () {
      fn.call(obj);
    })
  }
}
on(document, 'click', fn1)

元素拖拽

function drag(obj) {
  var cw = document.documentElement.clientWidth;
  var ch = document.documentElement.clientHeight;
  obj.onmousedown = function (e) {
    var e = e || event;
    var disW = e.clientX - this.offsetLeft;
    var disH = e.clientY - this.offsetTop;
    //解決IE文字選中後移動問題：
    if (obj.setCapture) {
      obj.setCapture();
    }
    document.onmousemove = function (e) {
      var e = e || event;
      var cw_w = e.clientX - disW;
      var ch_h = e.clientY - disH
      if (cw_w < 0) {
        cw_w = 0
      } 
      else if (ch_h < 0) {
        ch_h = 0
      } 
      else if (cw_w > cw - obj.offsetWidth) {
        cw_w = cw - obj.offsetWidth
      } 
      else if (ch_h > ch - obj.offsetHeight) {
        ch_h = ch - obj.offsetHeight
      }
      obj.style.left = cw_w + 'px'
      obj.style.top = ch_h + 'px'
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      //解決IE8抬起鼠標，釋放全局捕獲 releaseCapture();
      if (obj.releaseCapture) {
        obj.releaseCapture()
      }
    }
    return false; //down事件觸發時陰止默認行為；
  }
}

獲取className

function getClassName(parent, tagName, className) {
  var aEls = parent.getElementsByTagName(tagName)
  var arr = []
  for (var i = 0; i < aEls.length; i++) {
    var aClassName = aEls[i].className.split(' '); //当前classname拆分成数组
    for (var j = 0; j < aClassName.length; j++) {
      if (aClassName[j] == className) { //如果第j个class == classname
        arr.push(aEls[i]) //则把当前第i个class push进来
        break; //如果class='box box'相同名字，找到一个跳出for
      }
    }
  }
  return arr;
}
getClassName(document, 'li', 'box');

增加class方法

function addClass(obj, className) {
  if (obj.className == '') { //原本无
    obj.className = className;
  } 
  else { //原本有
    var arrClassName = obj.className.split(' ');
    var _index = arrIndexOf(arrClassName, className);
    if (_index == - 1) { //不存在
      obj.className += ' ' + className;
    }
  }
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == v) {
      return i; //当前重複的值出现位置
    }
  }
  return - 1;
}
 
addClass(box, 'box111');

刪除class方法

function removeClass(obj, className) {
  if (obj.className != '') {   //如果有class
    var arrClassName = obj.className.split(' ');
    console.log(arrClassName);
    var _index = arrIndexOf(arrClassName, className);
    if (_index != - 1) {     //如果有需要移除的class
      arrClassName.splice(_index, 1); //删除数组裏需要移除的
      obj.className = arrClassName.join(' ');//再把處理完的數組class給obj
    } 
  }
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == v) {
      return i; //当前重複的值出现位置
    }
  }
  return - 1;
}
 
removeClass(box, 'box3')

選中文字方法

function selectText() {
    if (document.selection) { //IE
        return document.selection.createRange().text;//字符串
    }
    else {
        return window.getSelection().toString(); //getSelection()對象，需轉成字符串
    }
}

阻止冒泡

function (ev) {
    ev = ev || event
    if(ev.stopPropagation){
        ev.stopPropagation();
    }
    else{
        ev.cancelBubble = true;
    }
}

阻止默認事件

function (ev) {
  ev = ev || event
  if (ev.preventDefault) {
    ev.preventDefault();
  } 
  else {
    ev.returnValue = false;
    return false;
  }
}

判斷IE

var ie = !-[1,] //IE9已修復
//推薦
if(!window.VBArray){
    alert('Not IE')
}
else{
    alert('IE')
}

getStyle,startMove方法

function startMove(obj,json,endFn){clearInterval(obj.timer);obj.timer=setInterval(function(){var bBtn=true;for(var attr in json){var iCur=0;if(attr=="opacity"){if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){iCur=Math.round(parseFloat(getStyle(obj,attr))*100)}else{iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100}}else{iCur=parseInt(getStyle(obj,attr))||0}var iSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(iCur!=json[attr]){bBtn=false}if(attr=="opacity"){obj.style.filter="alpha(opacity="+(iCur+iSpeed)+")";obj.style.opacity=(iCur+iSpeed)/100}else{obj.style[attr]=iCur+iSpeed+"px"}}if(bBtn){clearInterval(obj.timer);if(endFn){endFn.call(obj)}}},30)}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(obj,false)[attr]}};

getStyle(obj,'left')  //top,opacity,zIndex,width,height....帶px
startMove(img,{left:30;top:100}，fn)//left:30;top:100同時進行
startMove(img,{left:30},function(){ startMove(img,{top:100}) },fn) //分步執行

Ajax封裝

function ajax(url,fnSucc,fnFaild){var oAjax=null;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest()}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP")}oAjax.open("GET",url,true);oAjax.send();oAjax.onreadystatechange=function(){if(oAjax.readyState==4){if(oAjax.status==200){fnSucc(oAjax.responseText)}else{if(fnFaild){fnFaild()}}}}};

ajax('date.js',function(){alert('成功')},function(){alert('失敗')})

兼容獲取class對象

function getByClass(oParent, sClass) {
    var aEle = oParent.getElementsByTagName('*');
    var result = [] //最后返回数组
    var re = new RegExp('\\b' + sClass + '\\b', 'i');//正则对象
    for (var i = 0; i < aEle.length; i++) {
        if (re.test(aEle[i].className)) {
            result.push(aEle[i])
        }
    }
    return result;
}

var box = getByClass(document, 'box')

連續觸發兼容寫法

if(ie){
this.inp.onpropertychange = function(){}
}
else{
this.inp.oninput = function(){}
}

doMove前後上下移動

function doMove(obj, attr, dir, target) { //obj,屬性[left，top]，速度[每次時間移動多長],目標點
  dir = parseInt(getStyle(obj, attr)) < target ? dir : - dir
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    var speed = parseInt(getStyle(obj, attr)) + dir
    if (speed > target && dir > 0 || speed < target && dir < 0) {
      speed = target
    }
    obj.style[attr] = speed + 'px'
    if (speed == target) {
      clearInterval(obj.timer)
    }
  }, 30)
}

doMove(obj,'left',30,10) //移動obj的left到10px的位置,速度為每30ms移動30px
doMove(obj,'left',40,500) //移動obj的left到500px位置，速度為每30ms移動40px
//如果當前left從小到大，則為往前，反之為往後；

WebkitTransitionEnd webkitAnimationEnd方法封装

function addEnd(obj, fn)
{
  obj.addEventListener('WebkitTransitionEnd', fn, false);
  obj.addEventListener('transitionend', fn, false);
}
function removeEnd(obj, fn)
{
  obj.removeEventListener('WebkitTransitionEnd', fn, false);
  obj.removeEventListener('transitionend', fn, false);
}

//同理還有
function addEnd(obj, fn) {
  obj.addEventListener('webkitAnimationEnd', fn, false);
  obj.addEventListener('animationend', fn, false);
}


//end函數如觸發transition行為，即改變width/height/opacity....，則須先removeEnd(obj,fn)
addEnd(obj,end)
function end(){
    removeEnd(obj,end)
    //do something...
}

直角三角形已知斜邊及角度，求另兩邊，方法封裝

function toLT(iR, iDeg) { //斜边[圆弧半径]，角度
  return {
    l: Math.round(Math.sin(iDeg / 180 * Math.PI) * iR),
    t: Math.round(Math.cos(iDeg / 180 * Math.PI) * iR)
  }
}
//如已知半徑iR = -150 ; 角度依次增加 var _RH = toLT(-150,90/4*i)
left = _RH.l;top = _RH.t

獲取元素到屏幕的距離 直當於jq的offset()

    function getPos(obj){
        var pos = {left: 0, top:0};
        while (obj) {
            pos.left +=obj.offsetLeft;
            pos.top +=obj.offsetTop;
            obj = obj.offsetParent
        }
        return pos;
    }

抖動

    function shake(obj, attr, endfn) {
        if (obj.door) {
            return
        }
        obj.door = 1;
        var pos = parseInt(css(obj,attr));
        var arr = []; //20 -20 18 -18
        var num = 0;
        for (var i = 20; i > 0; i -= 2) {
            arr.push(i, - i);
        }
        arr.push(0);
        clearTimeout(obj.shake)
        obj.shake = setInterval(function () {
            obj.style[attr] = pos + arr[num] + 'px'
            num++
            if (num == arr.length) {
                clearInterval(obj.shake)
                endfn && endfn()
                obj.door = 0;
            }
        }, 50)
    }