J.chong

隨機數生產

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)
    }

字符串方法

• 下標值找對應的字符： str.charAt(位置)
  
• 字符轉編碼： str.charCodeAt(位置)
  
• 編碼轉字符： String.fromCharCode(編碼,編碼)
  
• 截取一段字符：str.substring()、str.slice()
  
• 字符串分割成數組：str.split()
  
• 數組連接成字符串: str.join()

var str = '百度一下，你就知道'  //百 = 30334; 度 = 24230

console.log(str.charAt()); //百 str.charAt(位置)默認為0;
console.log(str.charAt(50)); //找不到則返回空白

console.log(str.charCodeAt(1)); //24230 charCodeAt(位置)，默認0 返回字符編碼值
console.log(str.charCodeAt(50)); //NaN 找不到則返回NaN

console.log(String.fromCharCode(24230)); //百 根據編碼返回字
console.log(String.fromCharCode(30334, 24230)); //百度
console.log(String.fromCharCode(789745544845647000)); //找不到則返回空白

//inp只允許輸入數字，isNaN無法判斷空格，所以使用str.charCodeAt()
/*
0 - 9之間的編碼為： 48 - 57
a - z 之間的編碼為： 97 - 122
A - Z 之間的編碼為： 65 - 90  
*/
function detectNum(str) {
  var n = 0;
  for (var i = 0; i < str.length; i++) {
    n = str.charCodeAt(i); //每一位的編碼
    if (n < 48 || n > 57) { //有一個非數字，後面不需要檢測
      return false;
    }
  }
  return true;
}

//打印編碼
document.body.innerHTML = String.fromCharCode()
var str = '';
for (var i = 0; i < 1000; i++) {
  str += String.fromCharCode(i) + ' '
}
document.body.innerHTML = str;

//簡漏加密
var inp = document.getElementsByTagName('input')
var box = document.getElementById('box')
inp[1].onclick = function () {
  var str = inp[0].value;
  var strN = '';
  for (var i = 0; i < str.length; i++) {
    strN += String.fromCharCode(str.charCodeAt(i) - 1000); //value每一個轉成編碼
  }
  box.innerHTML = strN;
}

str.indexOf()方法 -- indexOf(字符或字符串) 找到則返回位置，找不到則返回-1，indexOf(字符或字符串,從第幾位開始找),第二個參數為負數，默認0
str.lastIndexOf(),從左 <-- 右

var str = 'what id how goe what miei slfk.mai to zhay zip sib sussuej ahwt haha,id what at miei slfk.mai to zhay'
var s = 'what' //待查找字符
var i = 0;
var nu = 0;
for (; str.indexOf(s, i) != - 1; ) { //重覆執行找不到為止
  alert('找到位置：' + i) //找到3次
  i = str.indexOf(s, i) + s.length //i從找到的位置後加目標長度繼續找、
  nu++;
}
alert('總共：' + nu) //3

//比較
alert('你好'>'我好') //false
console.log('你'.charCodeAt()); //20320
console.log('我'.charCodeAt()); //25105

str.substring()、str.slice() 方法

var str = 'what id how goe what miei slfk.mai'
console.log(str.substring(0, 4)); //what
console.log(str.substring(4, 0)); // what 大的會自動在前面
console.log(str.substring( - 2, 4)); //what  負數當成0處理

console.log(str.slice(0, 4)); //what
console.log(str.slice(4, 0)); //無substring交換位置功能，返回空白
console.log(str.slice( - 3)); //mai 負數 = 尾部找

//展開收縮
_a.onclick = function () {
  if (on) {
    var stra = _span.innerHTML.substring(0, 27);
    _span.innerHTML = stra + '……';
    _a.innerHTML = '展開'
  } 
  else {
    _span.innerHTML = _spani
    _a.innerHTML = '收縮'
  }
  on = !on //每次點擊取反
}

str.toUpperCase()
str.toLowerCase()

str.split()、arr.join()

var strb = 'www.baidu.com'
console.log(strb.split('.')); //["www", "baidu", "com"]

var strT = 'www'
console.log(strT.split()); //["www"]
console.log(strT.split('')); //["w", "w", "w"]

var strM = '去芫存菁'
console.log(strM.split('芫')); //["去", "存菁"]

var strH = '/www.baidu.com/';
console.log(strH.split('/')); //["", "www.baidu.com", ""]

var strD = '2012-08-16-21-14-56'
console.log(strD.split('-')); //["2012", "08", "16", "21", "14", "56"]
console.log(strD.split('-', 3)); //["2012", "08", "16"] 第二個參數表示截取幾組

var arr = [
  'a',
  'b',
  'c'
]
console.log(arr.join()); //a,b,c 不加參數，中間默認有,
console.log(arr.join('')); //abc
console.log(arr.join('-')); //a-b-c

應用一 ：
1、獲取值
2、把值轉成數組 str.split('')
3、向數組裏的每一項添加標籤
4、把新數組重新組合成字符串 arr.join('')

應用二 ：
1、使用所輸入的內容作為分割可符，分割成數組，[, , , , , ,]
2、再用新的形式作為連接符，連接成字符串
3、所以替換功能也只是把join連接符換成新輸入內容即可

<p id="find">腦殘文段一：站在十六岁，站在青春转弯的地方，站在一段生命与另一段生命的罅隙，我终于泪流满面。<br />
    在黑色的风吹起的日子，在看到霰血鸟破空悲鸣的日子，在红莲绽放樱花伤势的日子里，在你抬头低头的笑容间，在千年万年的时光裂缝与罅隙中，我总是泪流满面。因为我总是意犹未尽地想起你。这是最残酷也是最温柔的囚禁吗？ </p>
<input type="text" id="findinp"/>
<input type="button" id="findbtn" value="findbtn"/>

var pfind = document.getElementById('find')
var findinp = document.getElementById('findinp')
var findbtn = document.getElementById('findbtn')
findbtn.onclick = function () {
  var str = findinp.value; //輸入內容作為分割符
  if (!str) return false
  pfind.innerHTML = pfind.innerHTML.split(str).join('<span>' + str + '</span>') //以 關鍵字 分割，以 新關鍵字 組合
}

數組方法
1、截取數組方法：arr.length = n；字符串的lenght無法寫；清空：arr.length = 0; || arr = []
2、添加 push()/unshift()， 返回長度； 刪除 pop()/shift()，返回被刪；
3、數組添加刪除、替換、添加 arr.splice()；刪除：返回被刪，替換：返回被刪，添加：返回[]
4、去除重複數組，循環1獲取第一個i，循環2獲取很二個j，j = i+1，前後對比；相等splice刪，j--;
5、排序：arr.sort(function(a,b){return a-b})，b-a表示從大到小；
6、隨機排：arr.sort(function(a,b){return Math.random()-0.5;});
7、隨機數：Math.round(Math.random();
8、數組連接：arr.concat(arr1,arr2,...); 顛倒位置：arr.reverse();

var arr = [1,2,3]
var arr = new Array(1,2,3)  //區別： var arr = Array(n),表示長度：n

var arr = [1,2,3]
arr.length = 1; //可寫
console.log(arr); // [1]

arr.length = 0;
arr = [] //清空數組，效率可能高

var str = 'abc'
str.length = 1; //字符串的length無法寫
console.log(str); //數組length可寫，字符串不可寫

var arr = [];
arr.push(1, 2, 3) //最後一位添加
console.log(arr.push('abc')); //4 arr.push()返回值為length

arr.unshift(0) //最前面一位添加
console.log(arr.unshift('def')); //6 arr.unshift返回值為length IE67不支持

var arrD = ['ab','bc','cd','de']
arrD.pop() //刪除最後一位
console.log(arrD.pop()); //返回被刪除字符

var arrD2 =  ['ab','bc','cd','de']
arrD2.shift() //刪除第一位
console.log(arrD2.shift()); //返回被刪除字符

排隊 應用：切換圖片交換位置

var arrQ = ['1','2','3','4']
arrQ.unshift(arrQ.pop()) //刪除最後一位，並把刪除元素添加首位
console.log(arrQ); //["4", "1", "2", "3"]

var arrQ2 = ['1','2','3','4']
arrQ2.push(arrQ2.shift())
console.log(arrQ2); //["2", "3", "4", "1"]

//刪除 arr.splice(位置,刪除個數)
var arrS = ['1','2','3','4']
arrS.splice(0, 1)
console.log(arrS);
console.log(arrS.splice(0, 1)); //返回被刪元素

//替換 arr.splice(位置,刪除個數,'替換內容')
var arrS2 = ['1','2','3','4']
arrS2.splice(0, 1, 'a')
console.log(arrS2);
console.log(arrS2.splice(0, 1, 'a')); //返回被刪元素

//添加 arr.splice(位置,刪除0,'添加內容1',...)
var arrS3 = ['1','2','3','4']
arrS3.splice(2, 0, 'a')
console.log(arrS3);

數組去重覆，此方法適用於較少個數，太多會卡死，性能差；

var arr = [1,2,3,4,45,5,5]
for (var i = 0; i < arr.length; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) { //第一位與第二位比較
      arr.splice(arr[j], 1)
      j--; //splice成立後會刪除一個，所以arr.length應該減少1位
    }
  }
}
console.log(arr);

排序、從大到小，從小到大，隨機排

var arr = [4,1,2,3,4,454,56,5878,1]
arr.sort()
console.log(arr);
arr.sort(function (a, b) {
  return a - b; //b - a 從大到小
})
console.log(arr);
// 快速，希爾、冒泡、歸並、選擇、插入

var arr = ['323px','123px','10px','2000px']
arr.sort(function (a, b) {
  return parseInt(a) - parseInt(b)
})
console.log(arr);

//隨機排序
var arr = [1,2,3,4,5,6,7,8]
arr.sort(function (a, b) {
  return Math.random() - 0.5;
})
console.log(arr);

隨機範圍及生產
0~1：Math.random()， Math.floor() 向下; Math.ceil() 向上 Math.round()四舍五入
0-10：Math.round(Math.random()* 10)
x~y：function xyNum(x, y) { return Math.round(Math.random() * (y - x) + x) }
0~y：Math.round(Math.random() * y);
1~y：Math.ceil(Math.random() * y);

數組連接 arr.concat(arr1,arr2,arr3,...)
顛倒數組位置：arr.reverse();

var arr = [2,3,4,5,56]
arr.reverse()
console.log(arr)  // [56, 5, 4, 3, 2]

//所以顛倒字符串是
str = 'abcdef'
console.log(str.split('').reverse().join('')); // fedcba 轉成數組，顛倒，轉回字符

不重覆隨機數生產：ex: 1000選500不重複
思路一:

1、創建數組，存範圍內的所有數據 1000，所以每一位都不相同了;
2、新數組獲取500個創建數組的隨機位置，即能不重複；

function randomNumOne(range, count) { //randomNumOne(範圍,個數)
  var arrR = []
  var arrC = []
  for (var i = 0; i < range; i++) {
    arrR.push(i)
  }
  for (var i = 0; i < count; i++) {
    var index = Math.floor(Math.random() * arrR.length); //注間位置範圍隨機產生也需要在數組的長度內，比如使用splice刪除1位，則數組長度也減少1位；
    arrC.push(arrR.splice(index, 1))
  }
  return arrC;
}

思路二：

1、創建數組，存範圍內的所有數據 1000 所以每一位都不相同了;
2、再打亂此數據；
3、返回截取需要數組中的500位，效率較高

function randomNumTwo(range, count) {
  var arrR = [
  ]
  for (var i = 0; i < range; i++) {
    arrR.push(i)
  }
  arrR.sort(function (a, b) {
    return Math.random() - 0.5;
  })
  arrR.length = count;
  return arrR;
}

類似字符串indexOf方法，返回指定元素的們置，找不到返回 -1；

var arr = ['abc','def','123','ggg']
console.log(arrIndexOf(arr, '12d3'));

function arrIndexOf(arr, v) {
  var indexof = -1;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == v) {
      indexof = i;
    }
  }
  return indexof
}

var json = { name:'elmok','age':30 };
var json = { 'name':'elmok','age':30 }; //推薦
console.log(json.name); //json.name = 'ooo'
console.log(json['name']); //json['name'] = 'ooo'

//數組套json
var arr = [{'name':'ELMOK'},{'age':30}];
console.log(arr[0].name);

for (var attr in json) {
  //  alert(attr)   //前面
  // alert(json[attr]);  //後面
}

//json套數組
var json = {
        url:['1.jpg','2.jpg'],
        txt:['图一','图二']
}
for (var attr in json) { //嵌套找
  for (var i = 0; i < json[attr].length; i++) {
    console.log(json[attr][i]);
  }
}

for in 也可操作對象，注意for in 無for循環裏如1,2,3,4...這樣的屬性，

var str = '';
var num = 0; //設置for in裏的個數
for (var attr in window) {
  str += attr + ':' + window[attr] + '<br />'
  num++
}
console.log(num);
document.body.innerHTML = str;

for 與 for in
1、json無長度,json.length == undefined ,無法使用for循環；
2、數組可使用for in,也可使用for

var json = {
  url: ['1.jpg','2.jpg'],
  txt: ['图一','图二']
}
for (var i = 0; i < json.length; i++) {
  alert(json[i])
}
console.log(json.length); //undefined
var arr = [ 1,2,3 ]
for (var i in arr) {
  console.log(arr[i]); // 1,2,3
}