常用js方法封装

常用js方法封装

var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: function(dt) { var str = ""; //存储时间的字符串 //获取年 var year = dt.getFullYear(); //获取月 var month = dt.getMonth() + 1; //获取日 var day = dt.getDate(); //获取小时 var hour = dt.getHours(); //获取分钟 var min = dt.getMinutes(); //获取秒 var sec = dt.getSeconds(); month = month < 10 ? "0" + month : month; day = day < 10 ? "0" + day : day; hour = hour < 10 ? "0" + hour : hour; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec; return str; }, /** * 获取指定标签对象 * @param id 标签的id属性值 * @returns {Element}根据id属性值返回指定标签对象 */ my$: function(id) { return document.getElementById(id); }, /** * 设置元素的文本内容 * @param element 任意元素 * @param text 任意文本内容 */ setInnerText: function(element, text) { if (typeof(element.textContent) == "undefined") { element.innerText = text; } else { element.textContent = text; } }, /** * 获取元素的文本内容 * @param element 任意元素 * @returns {*} 任意元素中的文本内容 */ getInnerText: function(element) { if (typeof(element.textContent) == "undefined") { return element.innerText; } else { return element.textContent; } }, /** * 获取父级元素中的第一个子元素 * @param element 父级元素 * @returns {*} 父级元素中的子级元素 */ getFirstElement: function(element) { if (element.firstElementChild) { return element.firstElementChild; } else { var node = element.firstChild; while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } }, /** * 获取父级元素中的最后一个子元素 * @param element 父级元素 * @returns {*} 最后一个子元素 */ getLastElement: function(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node = node.previousSibling; } return node; } }, /** * 获取某个元素的前一个兄弟元素 * @param element 某个元素 * @returns {*} 前一个兄弟元素 */ getPreviousElement: function(element) { if (element.previousElementSibling) { return element.previousElementSibling } else { var node = element.previousSibling; while (node && node.nodeType != 1) { node = node.previousSibling; } return node; } }, /** * 获取某个元素的后一个兄弟元素 * @param element 某个元素 * @returns {*} 后一个兄弟元素 */ getNextElement: function(element) { if (element.nextElementSibling) { return element.nextElementSibling } else { var node = element.nextSibling; while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } }, /** * 获取某个元素的所有兄弟元素 * @param element 某个元素 * @returns {Array} 兄弟元素 */ getSiblings: function(element) { if (!element) return; var elements = []; var ele = element.previousSibling; while (ele) { if (ele.nodeType === 1) { elements.push(ele); } ele = ele.previousSibling; } ele = element.nextSibling; while (ele) { if (ele.nodeType === 1) { elements.push(ele); } ele = ele.nextSibling; } return elements; }, /** * 返回当前浏览器是什么类型的浏览器 */ userBrowser: function() { var browserName = navigator.userAgent.toLowerCase(); if (/msie/i.test(browserName) && !/opera/.test(browserName)) { console.log("IE"); } else if (/firefox/i.test(browserName)) { console.log("Firefox"); } else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) { console.log("Chrome"); } else if (/opera/i.test(browserName)) { console.log("Opera"); } else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) { console.log("Safari"); } else { console.log("不知道什么鬼!"); } }, //缓动动画函数的封装 //获取元素样式计算后的值 getStyle: function(element, attr) { return element.currentStyle ? element.currentStyle["attr"] : window.getComputedStyle(element, null)[attr]; }, //缓动动画函数的封装 animate: function(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function() { var flag = true; for (var attr in json) { if (attr == "opacity") { var current = getStyle(element, attr) * 100; var target = json[attr] * 100; //每次移动的步数 var step = (target - current) / 10; //每次移动步数都是整数(比较大的数字) step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; //移动后的当前的像素 element.style[attr] = current / 100; } else if (attr == "zIndex") { element.style[attr] = json[attr]; } else { var current = parseInt(getStyle(element, attr)); var target = json[attr]; //每次移动的步数 var step = (target - current) / 10; //每次移动步数都是整数(比较大的数字) step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; //移动后的当前的像素 element.style[attr] = current + "px"; } if (current != target) { //到达目标后停止计时器 flag = false; } } if (flag) { clearInterval(element.timeId); //清理计时器 if (fn) { fn(); } } //console.log("target:" + target + ",current:" + current + ",step:" + step); }, 20); }, /*去除空格*/ // type 1-所有空格 2-前后空格 3-前空格 4-后空格 trim: function(str, type) { switch (type) { case 1: return str.replace(/\s+/g, ""); case 2: return str.replace(/(^\s*)|(\s*$)/g, ""); case 3: return str.replace(/(^\s*)/g, ""); case 4: return str.replace(/(\s*$)/g, ""); default: return str; } }, /*type 1:首字母大写 2:首页母小写 3:大小写转换 4:全部大写 5:全部小写 */ //changeCase(‘asdasd‘,1) //Asdasd changeCase: function(str, type) { function ToggleCase(str) { var itemText = "" str.split("").forEach( function(item) { if (/^([a-z]+)/.test(item)) { itemText += item.toUpperCase(); } else if (/^([A-Z]+)/.test(item)) { itemText += item.toLowerCase(); } else { itemText += item; } }); return itemText; } switch (type) { case 1: return str.replace(/^(\w)(\w+)/, function(v, v1, v2) { return v1.toUpperCase() + v2.toLowerCase(); }); case 2: return str.replace(/^(\w)(\w+)/, function(v, v1, v2) { return v1.toLowerCase() + v2.toUpperCase(); }); case 3: return ToggleCase(str); case 4: return str.toUpperCase(); case 5: return str.toLowerCase(); default: return str; } }, /*字符串循环复制*/ //repeatStr(str->字符串, count->次数) //repeatStr(‘123‘,3) //"123123123" repeatStr: function(str, count) { var text = ‘‘; for (var i = 0; i < count; i++) { text += str; } return text; }, //字符串替换(字符串,要替换的字符,替换成什么) replaceAll: function(str, AFindText, ARepText) {    raRegExp = new RegExp(AFindText, "g");    return str.replace(raRegExp, ARepText); }, /*替换 * */ //replaceStr(字符串,字符格式, 替换方式,替换的字符(默认*)) replaceStr: function(str, regArr, type, ARepText) { var regtext = ‘‘, Reg = null, replaceText = ARepText || ‘*‘; //replaceStr(‘18819322663‘,[3,5,3],0) //188*****663 //repeatStr是在上面定义过的(字符串循环复制),大家注意哦 if (regArr.length === 3 && type === 0) { regtext = ‘(\\w{‘ + regArr[0] + ‘})\\w{‘ + regArr[1] + ‘}(\\w{‘ + regArr[2] + ‘})‘ Reg = new RegExp(regtext); var replaceCount = repeatStr(replaceText, regArr[1]); return str.replace(Reg, ‘$1‘ + replaceCount + ‘$2‘) } //replaceStr(‘asdasdasdaa‘,[3,5,3],1) //***asdas*** else if (regArr.length === 3 && type === 1) { regtext = ‘\\w{‘ + regArr[0] + ‘}(\\w{‘ + regArr[1] + ‘})\\w{‘ + regArr[2] + ‘}‘ Reg = new RegExp(regtext); var replaceCount1 = repeatSte(replaceText, regArr[0]); var replaceCount2 = repeatSte(replaceText, regArr[2]); return str.replace(Reg, replaceCount1 + ‘$1‘ + replaceCount2) } //replaceStr(‘1asd88465asdwqe3‘,[5],0) //*****8465asdwqe3 else if (regArr.length === 1 && type == 0) { regtext = ‘(^\\w{‘ + regArr[0] + ‘})‘ Reg = new RegExp(regtext); var replaceCount = repeatSte(replaceText, regArr[0]); return str.replace(Reg, replaceCount) } //replaceStr(‘1asd88465asdwqe3‘,[5],1,‘+‘) //"1asd88465as+++++" else if (regArr.length === 1 && type == 1) { regtext = ‘(\\w{‘ + regArr[0] + ‘}$)‘ Reg = new RegExp(regtext); var replaceCount = repeatSte(replaceText, regArr[0]); return str.replace(Reg, replaceCount) } }, /*检测字符串*/ //checkType(‘165226226326‘,‘phone‘) //false //大家可以根据需要扩展 checkType: function(str, type) { switch (type) { case ‘email‘: return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str); case ‘phone‘: return /^1[3|4|5|7|8][0-9]{9}$/.test(str); case ‘tel‘: return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str); case ‘number‘: return /^[0-9]$/.test(str); case ‘english‘: return /^[a-zA-Z]+$/.test(str); case ‘chinese‘: return /^[\u4E00-\u9FA5]+$/.test(str); case ‘lower‘: return /^[a-z]+$/.test(str); case ‘upper‘: return /^[A-Z]+$/.test(str); default: return true; } }, /*检测密码强度*/ //checkPwd(‘12asdASAD‘) //3(强度等级为3) checkPwd: function(str) { var nowLv = 0; if (str.length < 6) { return nowLv }; if (/[0-9]/.test(str)) { nowLv++ }; if (/[a-z]/.test(str)) { nowLv++ }; if (/[A-Z]/.test(str)) { nowLv++ }; if (/[\.|-|_]/.test(str)) { nowLv++ }; return nowLv; }, /*随机码*/ //count取值范围0-36 //randomNumber(10) //"2584316588472575" //randomNumber(14) //"9b405070dd00122640c192caab84537" //Math.random().toString(36).substring(2); //"83vhdx10rmjkyb9" randomNumber: function(count) { return Math.random().toString(count).substring(2); }, /*查找字符串出现次数*/ countStr: function(str, strSplit) { return str.split(strSplit).length - 1 }, //var strTest = ‘sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967‘ //countStr(strTest,‘blog‘) //6 /*数组去重*/ //ES6新增的Set数据结构,类似于数组,但是里面的元素都是唯一的 ,其构造函数可以接受一个数组作为参数 //let arr=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8] //let set = new Set(array); //{1,2,6,3,5,69,66,7,4,8,9663} //ES6中Array新增了一个静态方法from,可以把类似数组的对象转换为数组 //Array.from(set) //[1,2,6,3,5,69,66,7,4,8,9663] removeRepeatArray: function(arr) { return Array.from(new Set(arr)) }, /*数组顺序打乱*/ upsetArr: function(arr) { return arr.sort(function() { return Math.random() - 0.5 }); }, /*数组最大值最小值*/ //这一块的封装,主要是针对数字类型的数组 maxArr: function(arr) { return Math.max.apply(null, arr); }, minArr: function(arr) { return Math.min.apply(null, arr); }, /*数组求和,平均值*/ //这一块的封装,主要是针对数字类型的数组 //求和 sumArr: function(arr) { var sumText = 0; for (var i = 0, len = arr.length; i < len; i++) { sumText += arr[i]; } return sumText; }, //平均值,小数点可能会有很多位,这里不做处理,处理了使用就不灵活了! covArr: function(arr) { var sumText = sumArr(arr); var covText = sumText / length; return covText; }, /*从数组中随机获取元素*/ //randomOne([1,2,3,6,8,5,4,2,6]) //8 //randomOne([1,2,3,6,8,5,4,2,6]) //1 randomOne: function(arr) { return arr[Math.floor(Math.random() * arr.length)]; }, /*返回数组(字符串)出现的次数*/ //getEleCount(‘asd56+asdasdwqe‘,‘a‘) //3 //getEleCount([1,2,3,4,5,66,77,22,55,22],22) //2 getEleCount: function(obj, ele) { var num = 0; for (var i = 0, len = obj.length; i < len; i++) { if (ele == obj[i]) { num++; } } return num; }, /*返回数组(字符串)出现最多的元素和次数*/ //arr, rank->长度,默认为数组长度,ranktype,排序方式,默认降序 //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])默认情况,返回所有元素出现的次数 //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)传参(rank=3),只返回出现次数排序前三的 //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)传参(ranktype=1,rank=null),升序返回所有元素出现次数 //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)传参(rank=3,ranktype=1),只返回出现次数排序(升序)前三的 getCount: function(arr, rank,ranktype) { var obj = {}; var k, arr1 = []; //记录每一元素出现的次数 for (var i = 0, len = arr.length; i < len; i++) { k = arr[i]; if (obj[k]) { obj[k]++; } else { obj[k] = 1; } } //保存结果{el-‘元素‘,count-出现次数} for (var o in obj) { arr1.push({ el: o, count: obj[o] }); } //排序(降序) arr1.sort(function(n1, n2) { return n2.count - n1.count }); //如果ranktype为1,则为升序,反转数组 if (ranktype === 1) { arr1 = arr1.reverse(); } var rank1 = rank || arr1.length; return arr1.slice(0, rank1); }, /*得到n1-n2下标的数组*/ //getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9) //[5, 6, 7, 8, 9] //getArrayNum([0,1,2,3,4,5,6,7,8,9],2) 不传第二个参数,默认返回从n1到数组结束的元素 //[2, 3, 4, 5, 6, 7, 8, 9] getArrayNum: function(arr, n1, n2) { var arr1 = [], len = n2 || arr.length - 1; for (var i = n1; i <= len; i++) { arr1.push(arr[i]) } return arr1; }, /*筛选数组*/ //删除值为‘val‘的数组元素 //removeArrayForValue([‘test‘,‘test1‘,‘test2‘,‘test‘,‘aaa‘],‘test‘,‘%‘) //["aaa"] 带有‘test‘的都删除 //removeArrayForValue([‘test‘,‘test1‘,‘test2‘,‘test‘,‘aaa‘],‘test‘) //["test1", "test2", "aaa"] //数组元素的值全等于‘test‘才被删除 removeArrayForValue: function(arr, val, type) { arr.filter(function(item) { return type === ‘%‘ ? item.indexOf(val) !== -1 : item !== val }) }, /*现金额大写转换*/ //upDigit(168752632) //"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整" //upDigit(1682) //"人民币壹仟陆佰捌拾贰元整" //upDigit(-1693) //"欠人民币壹仟陆佰玖拾叁元整" upDigit: function(n) { var fraction = [‘角‘, ‘分‘, ‘厘‘]; var digit = [‘零‘, ‘壹‘, ‘贰‘, ‘叁‘, ‘肆‘, ‘伍‘, ‘陆‘, ‘柒‘, ‘捌‘, ‘玖‘]; var unit = [ [‘元‘, ‘万‘, ‘亿‘], [‘‘, ‘拾‘, ‘佰‘, ‘仟‘] ]; var head = n < 0 ? ‘欠人民币‘ : ‘人民币‘; n = Math.abs(n); var s = ‘‘; for (var i = 0; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ‘‘); } s = s || ‘整‘; n = Math.floor(n); for (var i = 0; i < unit[0].length && n > 0; i++) { var p = ‘‘; for (var j = 0; j < unit[1].length && n > 0; j++) { p = digit[n % 10] + unit[1][j] + p; n = Math.floor(n / 10); } //s = p.replace(/(零.)*零$/, ‘‘).replace(/^$/, ‘零‘)+ unit[0][i] + s;  s = p + unit[0][i] + s; } return head + s.replace(/(零.)*零元/, ‘元‘).replace(/(零.)+/g, ‘零‘).replace(/^整$/, ‘零元整‘); }, /*设置,获取URL参数*/ //获取url参数 //getUrlPrmt(‘segmentfault.com/write?draftId=122000011938‘) //Object{draftId: "122000011938"} getUrlPrmt: function(url) { url = url ? url : window.location.href; let _pa = url.substring(url.indexOf(‘?‘) + 1), _arrS = _pa.split(‘&‘), _rs = {}; for (let i = 0, _len = _arrS.length; i < _len; i++) { let pos = _arrS[i].indexOf(‘=‘); if (pos == -1) { continue; } let name = _arrS[i].substring(0, pos), value = window.decodeURIComponent(_arrS[i].substring(pos + 1)); _rs[name] = value; } return _rs; }, //设置url参数 //setUrlPrmt({‘a‘:1,‘b‘:2}) //a=1&b=2 setUrlPrmt: function(obj) { let _rs = []; for (let p in obj) { if (obj[p] != null && obj[p] != ‘‘) { _rs.push(p + ‘=‘ + obj[p]) } } return _rs.join(‘&‘); }, /*随机返回一个范围内的数字*/ randomNumber: function(n1, n2) { //randomNumber(5,10) //返回5-10的随机整数,包括5,10 if (arguments.length === 2) { return Math.round(n1 + Math.random() * (n2 - n1)); } //randomNumber(10) //返回0-10的随机整数,包括0,10 else if (arguments.length === 1) { return Math.round(Math.random() * n1) } //randomNumber() //返回0-255的随机整数,包括0,255 else { return Math.round(Math.random() * 255) } }, /*适配rem*/ //使用方式很简单,比如效果图上,有张图片。宽高都是100px; //样式写法就是 // img{ // width:1rem; // height:1rem; // } //这样的设置,比如在屏幕宽度大于等于750px设备上,1rem=100px;图片显示就是宽高都是100px //比如在iphone6(屏幕宽度:375)上,375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px; getFontSize: function() { var doc = document, win = window; var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px if (clientWidth > 750) { clientWidth = 750 } //设置根元素font-size大小 docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘; }; //屏幕大小改变,或者横竖屏切换时,触发函数 win.addEventListener(resizeEvt, recalc, false); //文档加载完成时,触发函数 doc.addEventListener(‘DOMContentLoaded‘, recalc, false); },};

 

 

 

参考资源:https://me.csdn.net/Bs__Q

作者:前端很忙

相关文章