看看有没有你需要的 工具类函数

开发中碰到了一些可以和业务剥离并封装为工具函数的逻辑，查阅相关资料和自己封装些工具函数，以后碰到新的会在这里追加更新

常用的js工具函数(原生)

JS选取DOM元素的方法
注意：原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById('myid');
2、通过CLASS选取元素
document.getElementsByClassName('myclass')[0];
3、通过标签选取元素
document.getElementsByTagName('mydiv')[0];
4、通过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';

数组去重的方法p
Array.prototype.unique = function(){
　　var temp = {}, //新建一个空对象，给数组中没出现过的数添加一个属性
　　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);

}

常用的js工具函数(组件化开发)

判断是否为NAN

function eqNaN(value) {

return value !== value;

}

判断是否是对象

function isObject(value) {

// Avoid a V8 JIT bug in Chrome 19-20.

// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.

var type = typeof value;

return type === 'function' || !!value && type == 'object';

}

判断是否是颜色值

isColor = function (color, hasRgba = false) {

  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/

  let regRgb = /^[rR][gG][Bb]?[\(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[\)]{1}$/g

  let regRgba = /^[rR][gG][Bb][Aa]?[\(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[\)]{1}$/g

if (hasRgba) {

  return reg.test(color) || regRgb.test(color) || regRgba(color)

}

  return reg.test(color) || regRgb.test(color)

}

十六进制转为rgba
OXToRGB = function (color) {
  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  let sColor = color.toLowerCase()
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = '#'
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    // 处理六位的颜色值
    let sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return 'RGBA(' + sColorChange.join(',') + ',1)'
  } else {
    return sColor
  }
}
高亮搜索结果的关键字
brightenKeyword = function (val, keyword) {
  let len = val.toLowerCase().indexOf(keyword.toLowerCase())
  if (keyword !== '' && len > -1) {
    return `<span>${val.slice(0, len)}</span>
            <span style="color:#2A70FE">${val.slice(len, len + keyword.length)}</span>
            <span>${val.substr(len + keyword.length)}</span>`
  }
  return val
}
获取style样式
getStyle = (element, attr, NumberMode = 'int') => {
  let target;
  // scrollTop 获取方式不同，没有它不属于style，而且只有document.body才能用
  if (attr === 'scrollTop') {
    target = element.scrollTop;
  } else if (element.currentStyle) {
    target = element.currentStyle[attr];
  } else {
    target = document.defaultView.getComputedStyle(element, null)[attr];
  }
  // 在获取 opactiy 时需要获取小数 parseFloat
  return NumberMode === 'float' ? parseFloat(target) : parseInt(target);
};
页面到达底部，加载更多
这里用到了上一个getStyle方法

loadMore = (element, callback) => {
  let windowHeight = window.screen.height;
  let height;
  let setTop;
  let paddingBottom;
  let marginBottom;
  let requestFram;
  let oldScrollTop;
  document.body.addEventListener('scroll', () => {
    loadMore();
  }, false);
  // 运动开始时获取元素 高度 和 offseTop, pading, margin
  element.addEventListener('touchstart', () => {
    height = element.offsetHeight;
    setTop = element.offsetTop;
    paddingBottom = getStyle(element, 'paddingBottom');
    marginBottom = getStyle(element, 'marginBottom');
  }, {passive: true});
  // 运动过程中保持监听 scrollTop 的值判断是否到达底部
  element.addEventListener('touchmove', () => {
    loadMore();
  }, {passive: true});
  // 运动结束时判断是否有惯性运动，惯性运动结束判断是非到达底部
  element.addEventListener('touchend', () => {
    oldScrollTop = document.body.scrollTop;
    moveEnd();
  }, {passive: true});
  const moveEnd = () => {
    requestFram = requestAnimationFrame(() => {
      if (document.body.scrollTop !== oldScrollTop) {
        oldScrollTop = document.body.scrollTop;
        loadMore();
        moveEnd();
      } else {
        cancelAnimationFrame(requestFram);
        // 为了防止鼠标抬起时已经渲染好数据从而导致重获取数据，应该重新获取dom高度
        height = element.offsetHeight;
        loadMore();
      }
    });
  }; 
  const loadMore = () => {
    if (document.body.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom) {
      callback();
    }
  };
};
判断是否是数组的方法
function isArray (value) {
    return value && !value.propertyIsEnumerable('length') && typeof value === 'object' && typeof value.length === 'number'
}
 判断是否为老版

function isOldVersion (boundry, current) {
    const boundryArr = boundry.split('.')
    const currentArr = current.split('.')
    for (let i = 0; i < 3; i++) {
        const bound = Number(boundryArr[i])
        const curr = Number(currentArr[i])
        if (cuur < bound) {
            return true
        } else if (curr > bound) {
            return false
        }
    }
    return false
}

价格格式化

function formatPrice (value) {
  if (!value) {
    return 0
  }
  if (/,/.test(value)) {
    return value
  }
  value = String(value)
  const reg = /\d+\.?\d*/
  const HOLDER = 'HOLDER'
  const price = value.match(reg)[0]
  const holder = value.replace(price, HOLDER)
  value = holder.replace(HOLDER, Number(price).toLocaleString())
  return val