开发中碰到了一些可以和业务剥离并封装为工具函数的逻辑，查阅相关资料和自己封装些工具函数，以后碰到新的会在这里追加更新
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);
}
判断是否为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
