js經常使用的工具函數

JS選取DOM元素的方法
注意：原生JS選取DOM元素比使用jQuery類庫選取要快不少
一、經過ID選取元素
document.getElementById('myid');
二、經過CLASS選取元素
document.getElementsByClassName('myclass')[0];
三、經過標籤選取元素
document.getElementsByTagName('mydiv')[0];
四、經過NAME屬性選取元素（經常使用於表單）
document.getElementsByName('myname')[0];

JS修改CSS樣式
document.getElementById('myid').style.display = 'none';

JS修改CLASS屬性
document.getElementById('myid').className = 'active';

若是有多個CLASS屬性，即用空格隔開////////
document.getElementById('myid').className = 'active div-1';

移除該元素上的全部CLASS
document.getElementById('myid').className = ''
注意：使用classList會優於使用className
document.getElementById('myid').classList.item(0);//item爲類名的索引
document.getElementById('myid').classList.length;//只讀屬性
document.getElementById('myid').classList.add('newClass');//添加class
document.getElementById('myid').classList.remove('newClass');//移除class
document.getElementById('myid').classList.toggle('newClass');//切換，有則移除，沒有則添加
document.getElementById('myid').classList.contains('newClass');//判斷是否存在該class

JS修改文本
document.getElementById('myid').innerHTML = '123';

數組去重的方法
Array.prototype.unique = function(){
　　var tem = {}, //新建一個空對象，給數組中沒出現過的數添加一個屬性
　　arr = [], //去重後的數組
　　len = this.length; //要進行去重數組的長度
　　for(var i=0;i<len;i++){
　　　　if(!temp[this[i]]){ // 判斷數組中的數做爲屬性名在temp裏有沒有屬性值
　　　　　　temp[this[i]]="abc";//若是沒有屬性值，則說明沒出現過給他一個屬性值
　　　　　　arr.push(this[i]);//同時把這個數添加到去重後的數組裏
　　　　}
　　}
　　return arr; //最後返回這個數組，這是hash算法
}

 

刪除數組中存在重複的元素
function getUnique(someArray) { 
　　tempArray = someArray.slice(0); //複製數組到臨時數組 
　　for (var i = 0; i < tempArray.length; i++) { 
　　　　for (var j = i + 1; j < tempArray.length;) { 
　　　　　　if (tempArray[j] == tempArray[i]) 
　　　　　　//後面的元素若和待比較的相同，則刪除並計數； 
　　　　　　//刪除後，後面的元素會自動提早，因此指針j不移動 
　　　　　　{ 
　　　　　　　　tempArray.splice(j, 1); 
　　　　　　} 
　　　　　　else { 
　　　　　　　　j++; 
　　　　　　} 
　　　　　　//不一樣，則指針移動 
　　　　} 
　　} 
　　return tempArray; 
}

判斷某個值是否在數組中
Array.prototype.in_array = function (e) { 
　　for (i = 0; i < this.length; i++) { 
　　　　if (this[i] == e) 
　　　　return true; 
　　} 
　　return false; 
}

判斷某個值在數組中的位置
Array.prototype.indexOf = function (e) { 
　　for (i = 0; i < this.length; i++) { 
　　　　if (this[i] == e) 
　　　　return i; 
　　　} 
　　return -1; 
}

聖盃模式=繼承(繼承自他，更改本身又不會影響到他)
function inherit(Target,Origin){ //目標元素和初始元素
　　function F(){}; //建立一箇中間函數
　　F.prototype = Origin.prototype; //中間函數的原型繼承自原始函數
　　Target.prototype = new F(); //構造函數F 目標函數繼承自此
　　Target.prototype.constructor = Target; //使目標函數的構造器指向他本身
　　Target.prototype.uber = Origin.prototype; //在uber裏存儲目標函數真正繼承自哪裏
}
Father.prototype.lastName ="hui";
function Father(){}
function Son(){}
inherit(Son,Father);
var son = new Son();
var father new Father();

時間戳轉爲格式化時間
function formatDate(timestamp, formats) {
　　/*
　　formats格式包括
　　1. Y-M-D
　　2. Y-M-D h:m:s
　　3. Y年M月D日
　　4. Y年M月D日 h時m分
　　5. Y年M月D日 h時m分s秒
　　示例：console.log(formatDate(1500305226034, 'Y年M月D日 h:m:s')) ==> 2017年07月17日 23:27:06
　　*/
　　formats = formats || 'Y-M-D';
　　var myDate = timestamp ? new Date(timestamp) : new Date();
　　var year = myDate.getFullYear();
　　var month = formatDigit(myDate.getMonth() + 1);
　　var day = formatDigit(myDate.getDate());
　　var hour = formatDigit(myDate.getHours());
　　var minute = formatDigit(myDate.getMinutes());
　　var second = formatDigit(myDate.getSeconds());
　　return formats.replace(/Y|M|D|h|m|s/g, function(matches) {
　　　　return ({
　　　　　　Y: year,
　　　　　　M: month,
　　　　　　D: day,
　　　　　　h: hour,
　　　　　　m: minute,
　　　　　　s: second
　　　　})[matches];
　　});
// 小於10補0
function formatDigit(n) {
　　return n.toString().replace(/^(\d)$/, '0$1');
　　};
}

千分位顯示，經常使用於價格顯示
function toThousands(num) {
　　return parseFloat(num).toFixed(2).replace(/(\d{1,3})(?=(\d{3})+(?:\.))/g, "$1,");
}

Js獲取頁面地址參數
function getParameter(param) { 
　　var query = window.location.search;// 獲取URL地址中？後的全部字符 
　　var iLen = param.length;// 獲取你的參數名稱長度 
　　var iStart = query.indexOf(param);// 獲取你該參數名稱的其實索引 
　　if (iStart == -1)// -1爲沒有該參數 
　　return ""; 
　　iStart += iLen + 1; 
　　var iEnd = query.indexOf("&", iStart);// 獲取第二個參數的其實索引 
　　if (iEnd == -1)// 只有一個參數 
　　return query.substring(iStart);// 獲取單個參數的參數值 
　　return query.substring(iStart, iEnd);// 獲取第二個參數的值 
}

判斷是否數字
function IsNumeric(txt) { 
　　if (txt == "") { 
　　　　return false; 
　　} 
　　if (txt.indexOf(",") > 0) { 
　　　　txt = txt.replace(",", ""); 
　　} 
　　if (isNaN(txt)) { 
　　　　return false; 
　　} 
　　else { 
　　　　return true; 
　　} 
}

設置cookie

function setCookie(name, value, iDay)
{
　　var oDate=new Date();
　　oDate.setDate(oDate.getDate()+iDay);
　　document.cookie=name+'='+value+';expires='+oDate;
}

讀取cookies

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

刪除cookies 

function removeCookie(name)
{
　　setCookie(name, 1, -1);
}

jquery trim()函數的用法
recordList = $.trim(recordList);

緩衝圖片 loading效果
$("#loading",navTab.getCurrentPanel()).ajaxStart(function() { 
　　$(this).show(); 
　　}).ajaxComplete(function() { 
　　　　$(this).hide(); 
　　});

 

 

 

字符串超出省略
String.prototype.cutstr = function (len) { 
　　var restr = this; 
　　var wlength = this.replace(/[^\x00-\xff]/g, "**").length; 
　　if (wlength > len) { 
　　　　for (var k = len / 2; k < this.length; k++) { 
　　　　if (this.substr(0, k).replace(/[^\x00-\xff]/g, "**").length >= len) { 
　　　　　　restr = this.substr(0, k) + "..."; 
　　　　　　break; 
　　　　　} 
　　　　} 
　　} 
　　return restr; 
}

加入收藏夾
function AddFavorite(sURL, sTitle) { 
　　try { 
　　　　window.external.addFavorite(sURL, sTitle) 
　　} catch (e) { 
　　try { 
　　　　window.sidebar.addPanel(sTitle, sURL, "") 
　　} catch (e) { 
　　　　alert("加入收藏失敗，請使用Ctrl+D進行添加") 
　　} 
　　} 
} 
設爲首頁
function setHomepage(homeurl) { 
　　if (document.all) { 
　　document.body.style.behavior = 'url(#default#homepage)'; 
　　document.body.setHomePage(homeurl) 
　　} else if (window.sidebar) { 
　　　　if (window.netscape) { 
　　try { 
　　　　netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect") 
　　} catch (e) { 
　　　　alert("該操做被瀏覽器拒絕，若是想啓用該功能，請在地址欄內輸入about:config,而後將項 signed.applets.codebase_principal_support 值該爲true"); 
　　} 
} 
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); 
prefs.setCharPref('browser.startup.homepage', homeurl) 
} 
}

跨瀏覽器綁定事件
function addEventSamp(obj, evt, fn) { 
　　if (!oTarget) { return; } 
　　if (obj.addEventListener) { 
　　　　obj.addEventListener(evt, fn, false); 
　　} else if (obj.attachEvent) { 
　　　　obj.attachEvent('on' + evt, fn); 
　　} else { 
　　　　oTarget["on" + sEvtType] = fn; 
　　} 
}

跨瀏覽器刪除事件
function delEvt(obj, evt, fn) { 
　　if (!obj) { return; } 
　　if (obj.addEventListener) { 
　　　　obj.addEventListener(evt, fn, false); 
　　} else if (oTarget.attachEvent) { 
　　　　obj.attachEvent("on" + evt, fn); 
　　} else { 
　　　　obj["on" + evt] = fn; 
　　} 
} 

判斷是否移動設備訪問
function isMobileUserAgent() { 
　　return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase())); 
}

獲取頁面高度
function getPageHeight() { 
　　var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; 
　　return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight); 
} 
獲取頁面寬度
function getPageWidth() { 
　　var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; 
　　return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth); 
} 

獲取頁面scrollLeft
function getPageScrollLeft() { 
　　var a = document; 
　　return a.documentElement.scrollLeft || a.body.scrollLeft; 
} 
獲取頁面滾動距離
function getScrollOffset(){
　　if(window.pageXOffset){
　　　　return{
　　　　　　X : window.pageXOffset;
　　　　　　Y : window.pageYOffset
　　　　}
　　}else{//IE8及如下
　　　　return{
　　　　　　X : document.body.scrollLeft+document.documentElement.scrollLeft;
　　　　　　Y : document.body.scrollTop+document.documentElement.scrollTop;
　　　　}
    　}
}

獲取窗體可見範圍的寬與高
function getViewportOffset() { 
　　if(window.innerWidth){
　　　　return{
　　　　　　X : window.innerWidth;
　　　　　　Y : window.innerHeight
　　　　　　}
 　　　}else{//IE8及如下
　　　　if(document.compatMode == "BackCompat"){//若是是怪異模式、混雜模式
　　　　　　return{
　　　　　　　　X : document.body.clientWidth; 
　　　　　　　　Y : document.body.clientHeight;
　　　　　　　}
}else{
　　return {
　　　　 X : document.documentElement.clientWidth;//標準模式
　　　　 Y : document.documentElement.clientHeight
　　　　}
　　    }
　　}
}

查看元素的幾何尺寸
domEle.getBoundingClientRect();//6個值 left top right bottom width height 不是實時監控的

查看元素的視覺尺寸
div.offsetWidth
div.offsetHeight
div.offsetLeft //對於無定位的父集返回文檔的座標，對於有定位的父集返回相對最近有定位父集的座標
div.offsetTop
div.offsetParent //返回最近的有定位的父集

返回一個元素在文檔中的座標
function getElmentPosition(div){
　　if(div.offsetParent == body){
　　return {
　　　　X : div.offsetLeft;
　　　　Y : div.offsetTop
　　　　}
　　}else{

　　}
}

讓滾動條滾動
scrollTo();//滾動到xxx
scrollBy();//累加滾動xxxx

行間樣式-能夠寫入
div.style.width //必須寫到css style裏面，獲取的都是style裏的
div.style.cssFloat//浮動
window.getComputedStyle(div,null) //返回的計算樣式都是計算過的，不存在相對單位,只讀
window.getComputedStyle(div,null).width
window.getComputedStyle(div,"after") //獲取僞元素的樣式表
ele.currentStyle//ie專用，獲取顯示顯示樣式，只讀
ele.currentStyle.width

獲取樣式屬性
function getStyle(elem,prop){
　　if(window.getcomputedStyle){
　　　　return window.getComputedStyle(elem,null)[prop];
　　}else{
　　　　return elem.currentStyle[prop];
　　}
}

 

隨機數時間戳
function uniqueId() { 
　　var a = Math.random, b = parseInt; 
　　return Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a()); 
}

匹配國內電話號碼（0511-4405222 或 021-87888822) //////// 
function istell(str) { 
　　var result = str.match(/\d{3}-\d{8}|\d{4}-\d{7}/); 
　　if (result == null) return false; 
　　return true; 
}

匹配身份證(15位或18位)
function isIdCardNo(num) { 
　　num = num.toUpperCase(); 
        //身份證號碼爲15位或者18位，15位時全爲數字，18位前17位爲數字，最後一位是校驗位，可能爲數字或字符X。 
　　if (!(/(^/d{15}$)|(^/d{17}([0-9]|X)$)/.test(num))) 
　　{ 
　　　　alert('輸入的身份證號長度不對，或者號碼不符合規定！/n15位號碼應全爲數字，18位號碼末位能夠爲數字或X。'); 
　　　　return false; 
　　} 
}

移動電話
function checkMobile(str) { 
　　if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(str))) { 
　　　　return false; 
　　} 
　　return true; 
}

判斷輸入是不是有效的電子郵件
function isemail(str) { 
　　var result = str.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/); 
　　if (result == null) return false; 
　　　　return true; 
　　}

拆分整數與小數 
function splits(tranvalue) { 
　　var value = new Array('', ''); 
　　temp = tranvalue.split("."); 
　　for (var i = 0; i < temp.length; i++) { 
　　　　value = temp; 
　　} 
　　return value; 
}

JS建立元素並向其中追加文本
var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
////////同理：removeChild()移除節點，並返回節點////////
cloneNode()//複製節點
insertBefore()//插入節點（父節點內容的最前面）
//注意：insertBefore()有兩個參數，第一個是插入的節點，第二個是插入的位置
//例子：
var list = document.getElementById('myList');
list.insertBefore(newItem,list.childNodes[1]);
//插入新節點newItem到list的第二個子節點

//////insertAfter//////
Element.prototype.insertAfter = function(targetNode,afterNode){
　　var beforeNode = afterNode.nextElementSibling;
　　　　if(beforeNode == null){
　　　　　　afterNode.appendChild(targetNode);
　　　　}else{
　　　　　　this.insertBefore(targetNode,beforeNode);
　　}
}

浮點數加法運算
function FloatAdd(arg1, arg2)
{
var r1,r2,m;
　　try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
　　try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
　　m=Math.pow(10,Math.max(r1,r2)) 
　　return (arg1*m+arg2*m)/m
}

浮點數乘法運算
function FloatMul(arg1,arg2)
{ 
　　var m=0,s1=arg1.toString(),s2=arg2.toString();
　　try{m+=s1.split(".")[1].length}catch(e){}
　　try{m+=s2.split(".")[1].length}catch(e){}
　　return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
function toFixed(num, s) {
　　var s = 2;
　　var times = Math.pow(10, s)
　　var des = num * times + 0.5
　　des = parseInt(des, 10) / times
　　return des + ''
}

點擊空白處消失

$("#a").on("click", function(e){ 

　　$("#menu").show(); 
　　$(document).one("click", function(){ 
　　　　$("#menu").hide(); }); e.stopPropagation();
 　　});
 $("#menu").on("click", function(e){ e.stopPropagation(); });

常見的運動框架

window.onload = function() {

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function() {

        startMove(0);

    };

    oDiv.onmouseout = function() {

        startMove( - 150);

    };

};

var timer = null;

function startMove(iTarget) {

    var oDiv = document.getElementById('div1');

    clearInterval(timer);

    timer = setInterval(function() {

        var speed = 0;

        if (oDiv.offsetLeft > iTarget) {

            speed = -10;

        } else {

            speed = 10;

        }

        if (oDiv.offsetLeft == iTarget) {

            clearInterval(timer);

        } else {

            oDiv.style.left = oDiv.offsetLeft + speed + 'px';

        }

    },

    30);

}