常用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
作者:前端很忙
常用js方法封装
原文地址:https://www.cnblogs.com/mahmud/p/10252931.html