51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

JavaScript 和 CSS 常用工具方法封装

作者：周小肆
新闻 前端
因为工作中经常用到这些JavaScript 和 CSS 常用工具方法，所有便把这些方法进行了总结。

[[259543]]

 因为工作中经常用到这些方法，所有便把这些方法进行了总结。

JavaScript

1. type 类型判断

  1. isString (o) { //是否字符串 
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'String' 
  3. } 
  4.  
  5. isNumber (o) { //是否数字 
  6.     return Object.prototype.toString.call(o).slice(8, -1) === 'Number' 
  7. } 
  8.  
  9. isBoolean (o) { //是否boolean 
  10.     return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean' 
  11. } 
  12.  
  13. isFunction (o) { //是否函数 
  14.     return Object.prototype.toString.call(o).slice(8, -1) === 'Function' 
  15. } 
  16.  
  17. isNull (o) { //是否为null 
  18.     return Object.prototype.toString.call(o).slice(8, -1) === 'Null' 
  19. } 
  20.  
  21. isUndefined (o) { //是否undefined 
  22.     return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined' 
  23. } 
  24.  
  25. isObj (o) { //是否对象 
  26.     return Object.prototype.toString.call(o).slice(8, -1) === 'Object' 
  27. } 
  28.  
  29. isArray (o) { //是否数组 
  30.     return Object.prototype.toString.call(o).slice(8, -1) === 'Array' 
  31. } 
  32.  
  33. isDate (o) { //是否时间 
  34.     return Object.prototype.toString.call(o).slice(8, -1) === 'Date' 
  35. } 
  36.  
  37. isRegExp (o) { //是否正则 
  38.     return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp' 
  39. } 
  40.  
  41. isError (o) { //是否错误对象 
  42.     return Object.prototype.toString.call(o).slice(8, -1) === 'Error' 
  43. } 
  44.  
  45. isSymbol (o) { //是否Symbol函数 
  46.     return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol' 
  47. } 
  48.  
  49. isPromise (o) { //是否Promise对象 
  50.     return Object.prototype.toString.call(o).slice(8, -1) === 'Promise' 
  51. } 
  52.  
  53. isSet (o) { //是否Set对象 
  54.     return Object.prototype.toString.call(o).slice(8, -1) === 'Set' 
  55. } 
  56.  
  57. isFalse (o) { 
  58.     if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN') return true 
  59.         return false 
  60. } 
  61.  
  62. isTrue (o) { 
  63.     return !this.isFalse(o) 
  64. } 
  65.  
  66. isIos () { 
  67.     var u = navigator.userAgent; 
  68.     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机 
  69.         // return "Android"; 
  70.         return false 
  71.     } else if (u.indexOf('iPhone') > -1) {//苹果手机 
  72.         // return "iPhone"; 
  73.         return true 
  74.     } else if (u.indexOf('iPad') > -1) {//iPad 
  75.         // return "iPad"; 
  76.         return false 
  77.     } else if (u.indexOf('Windows Phone') > -1) {//winphone手机 
  78.         // return "Windows Phone"; 
  79.         return false 
  80.     }else{ 
  81.         return false 
  82.     } 
  83. } 
  84.  
  85. isPC () { //是否为PC端 
  86.     var userAgentInfo = navigator.userAgent; 
  87.     var Agents = ["Android", "iPhone", 
  88.                 "SymbianOS", "Windows Phone", 
  89.                 "iPad", "iPod"]; 
  90.     var flag = true; 
  91.     for (var v = 0; v < Agents.length; v++) { 
  92.         if (userAgentInfo.indexOf(Agents[v]) > 0) { 
  93.             flag = false; 
  94.             break; 
  95.         } 
  96.     } 
  97.     return flag; 
  98. } 
  99.  
  100. browserType(){ 
  101.     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
  102.     var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 
  103.     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
  104.     var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; 
  105.     var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器   
  106.     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 
  107.     var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 
  108.     var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器 
  109.  
  110.     if (isIE) { 
  111.         var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
  112.         reIE.test(userAgent); 
  113.         var fIEVersion = parseFloat(RegExp["$1"]); 
  114.         if(fIEVersion == 7) return "IE7" 
  115.         else if(fIEVersion == 8) return "IE8"; 
  116.         else if(fIEVersion == 9) return "IE9"; 
  117.         else if(fIEVersion == 10) return "IE10"; 
  118.         else return "IE7以下"//IE版本过低 
  119.     } 
  120.     if (isIE11) return 'IE11'; 
  121.     if (isEdge) return "Edge"; 
  122.     if (isFF) return "FF"; 
  123.     if (isOpera) return "Opera"; 
  124.     if (isSafari) return "Safari"; 
  125.     if (isChrome) return "Chrome"; 
  126. } 
  127.  
  128. checkStr (str, type) { 
  129.     switch (type) { 
  130.         case 'phone':   //手机号码 
  131.             return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str); 
  132.         case 'tel':     //座机 
  133.             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str); 
  134.         case 'card':    //身份证 
  135.             return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str); 
  136.         case 'pwd':     //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线 
  137.             return /^[a-zA-Z]\w{5,17}$/.test(str) 
  138.         case 'postal':  //邮政编码 
  139.             return /[1-9]\d{5}(?!\d)/.test(str); 
  140.         case 'QQ':      //QQ号 
  141.             return /^[1-9][0-9]{4,9}$/.test(str); 
  142.         case 'email':   //邮箱 
  143.             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str); 
  144.         case 'money':   //金额(小数点2位) 
  145.             return /^\d*(?:\.\d{0,2})?$/.test(str); 
  146.         case 'URL':     //网址 
  147.             return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str) 
  148.         case 'IP':      //IP 
  149.             return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str); 
  150.         case 'date':    //日期时间 
  151.             return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str) 
  152.         case 'number':  //数字 
  153.             return /^[0-9]$/.test(str); 
  154.         case 'english': //英文 
  155.             return /^[a-zA-Z]+$/.test(str); 
  156.         case 'chinese': //中文 
  157.             return /^[\u4E00-\u9FA5]+$/.test(str); 
  158.         case 'lower':   //小写 
  159.             return /^[a-z]+$/.test(str); 
  160.         case 'upper':   //大写 
  161.             return /^[A-Z]+$/.test(str); 
  162.         case 'HTML':    //HTML标记 
  163.             return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str); 
  164.         default: 
  165.             return true; 
  166.     } 
  167.  
  168.     // 严格的身份证校验 
  169.     isCardID(sId) { 
  170.         if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) { 
  171.             alert('你输入的身份证长度或格式错误') 
  172.             return false 
  173.         } 
  174.         //身份证城市 
  175.         var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; 
  176.         if(!aCity[parseInt(sId.substr(0,2))]) {  
  177.             alert('你的身份证地区非法') 
  178.             return false 
  179.         } 
  180.  
  181.         // 出生日期验证 
  182.         var sBirthday=(sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2))).replace(/-/g,"/"), 
  183.             d = new Date(sBirthday) 
  184.         if(sBirthday != (d.getFullYear()+"/"+ (d.getMonth()+1) + "/" + d.getDate())) { 
  185.             alert('身份证上的出生日期非法') 
  186.             return false 
  187.         } 
  188.  
  189.         // 身份证号码校验 
  190.         var sum = 0, 
  191.             weights =  [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], 
  192.             codes = "10X98765432" 
  193.         for (var i = 0; i < sId.length - 1; i++) { 
  194.             sum += sId[i] * weights[i]; 
  195.         } 
  196.         var last = codes[sum % 11]; //计算出来的最后一位身份证号码 
  197.         if (sId[sId.length-1] != last) {  
  198.             alert('你输入的身份证号非法') 
  199.             return false 
  200.         } 
  201.  
  202.         return true 
  203.     } 
  204. } 

2. Date

  1. /** 
  2.  * 格式化时间 
  3.  *  
  4.  * @param  {time} 时间 
  5.  * @param  {cFormat} 格式 
  6.  * @return {String} 字符串 
  7.  * 
  8.  * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00 
  9.  */ 
  10. formatTime(time, cFormat) { 
  11.     if (arguments.length === 0) return null 
  12.     if ((time + '').length === 10) { 
  13.         time = +time * 1000 
  14.     } 
  15.  
  16.     var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date 
  17.     if (typeof time === 'object') { 
  18.         date = time 
  19.     } else { 
  20.         date = new Date(time) 
  21.     } 
  22.  
  23.     var formatObj = { 
  24.         y: date.getFullYear(), 
  25.         m: date.getMonth() + 1, 
  26.         d: date.getDate(), 
  27.         h: date.getHours(), 
  28.         i: date.getMinutes(), 
  29.         s: date.getSeconds(), 
  30.         a: date.getDay() 
  31.     } 
  32.     var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { 
  33.         var value = formatObj[key] 
  34.         if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] 
  35.         if (result.length > 0 && value < 10) { 
  36.             value = '0' + value 
  37.         } 
  38.         return value || 0 
  39.     }) 
  40.     return time_str 
  41. } 
  42.  
  43. /** 
  44.  * 返回指定长度的月份集合 
  45.  *  
  46.  * @param  {time} 时间 
  47.  * @param  {len} 长度 
  48.  * @param  {direction} 方向：  1: 前几个月;  2: 后几个月;  3:前后几个月  默认 3 
  49.  * @return {Array} 数组 
  50.  *  
  51.  * @example   getMonths('2018-1-29', 6, 1)  // ->  ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"] 
  52.  */ 
  53. getMonths(time, len, direction) { 
  54.     var mm = new Date(time).getMonth(), 
  55.         yy = new Date(time).getFullYear(), 
  56.         direction = isNaN(direction) ? 3 : direction, 
  57.         index = mm; 
  58.     var cutMonth = function(index) { 
  59.         if ( index <= len && index >= -len) { 
  60.             return direction === 1 ? formatPre(index).concat(cutMonth(++index)): 
  61.                 direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index)) 
  62.         } 
  63.         return [] 
  64.     } 
  65.     var formatNext = function(i) { 
  66.         var y = Math.floor(i/12), 
  67.             m = i%12 
  68.         return [yy+y + '-' + (m+1)] 
  69.     } 
  70.     var formatPre = function(i) { 
  71.         var y = Math.ceil(i/12), 
  72.             m = i%12 
  73.         m = m===0 ? 12 : m 
  74.         return [yy-y + '-' + (13 - m)] 
  75.     } 
  76.     var formatCurr = function(i) { 
  77.         var y = Math.floor(i/12), 
  78.             yNext = Math.ceil(i/12), 
  79.             m = i%12, 
  80.             mNext = m===0 ? 12 : m 
  81.         return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)] 
  82.     } 
  83.     // 数组去重 
  84.     var unique = function(arr) { 
  85.         if ( Array.hasOwnProperty('from') ) { 
  86.             return Array.from(new Set(arr)); 
  87.         }else{ 
  88.             var n = {},r=[];  
  89.             for(var i = 0; i < arr.length; i++){ 
  90.                 if (!n[arr[i]]){ 
  91.                     n[arr[i]] = true;  
  92.                     r.push(arr[i]); 
  93.                 } 
  94.             } 
  95.             return r; 
  96.         } 
  97.     } 
  98.     return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){ 
  99.         return new Date(t1).getTime() - new Date(t2).getTime() 
  100.     })) 
  101. } 
  102.  
  103. /** 
  104.  * 返回指定长度的天数集合 
  105.  *  
  106.  * @param  {time} 时间 
  107.  * @param  {len} 长度 
  108.  * @param  {direction} 方向： 1: 前几天;  2: 后几天;  3:前后几天  默认 3 
  109.  * @return {Array} 数组 
  110.  * 
  111.  * @example date.getDays('2018-1-29', 6) // -> ["2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"] 
  112.  */ 
  113. getDays(time, len, diretion) { 
  114.     var tt = new Date(time) 
  115.     var getDay = function(day) { 
  116.         var t = new Date(time) 
  117.         t.setDate(t.getDate() + day) 
  118.         var m = t.getMonth()+1 
  119.         return t.getFullYear()+'-'+m+'-'+t.getDate() 
  120.     } 
  121.     var arr = [] 
  122.     if (diretion === 1) { 
  123.         for (var i = 1; i <= len; i++) { 
  124.             arr.unshift(getDay(-i)) 
  125.         } 
  126.     }else if(diretion === 2) { 
  127.         for (var i = 1; i <= len; i++) { 
  128.             arr.push(getDay(i)) 
  129.         } 
  130.     }else { 
  131.         for (var i = 1; i <= len; i++) { 
  132.             arr.unshift(getDay(-i)) 
  133.         } 
  134.         arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()) 
  135.         for (var i = 1; i <= len; i++) { 
  136.             arr.push(getDay(i)) 
  137.         } 
  138.     } 
  139.     return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :  
  140.         diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr 
  141. } 
  142.  
  143. /** 
  144.  * @param  {s} 秒数 
  145.  * @return {String} 字符串  
  146.  * 
  147.  * @example formatHMS(3610) // -> 1h0m10s 
  148.  */ 
  149. formatHMS (s) { 
  150.     var str = '' 
  151.     if (s > 3600) { 
  152.         str = Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s' 
  153.     }else if(s > 60) { 
  154.         str = Math.floor(s/60)+'m'+s%60+'s' 
  155.     }else{ 
  156.         str = s%60+'s' 
  157.     } 
  158.     return str 
  159. } 
  160.  
  161. /*获取某月有多少天*/ 
  162. getMonthOfDay (time) { 
  163.     var date = new Date(time) 
  164.     var year = date.getFullYear() 
  165.     var mouth = date.getMonth() + 1 
  166.     var days 
  167.  
  168.     //当月份为二月时，根据闰年还是非闰年判断天数 
  169.     if (mouth == 2) { 
  170.         days = (year%4==0 && year%100==0 && year%400==0) || (year%4==0 && year%100!=0) ? 28 : 29 
  171.     } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) { 
  172.         //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31； 
  173.         days = 31 
  174.     } else { 
  175.         //其他月份，天数为：30. 
  176.         days = 30 
  177.     } 
  178.     return days 
  179. } 
  180.  
  181. /*获取某年有多少天*/ 
  182. getYearOfDay (time) { 
  183.     var firstDayYear = this.getFirstDayOfYear(time); 
  184.     var lastDayYear = this.getLastDayOfYear(time); 
  185.     var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000; 
  186.     return Math.ceil(numSecond/(24*3600)); 
  187. } 
  188.  
  189. /*获取某年的第一天*/ 
  190. getFirstDayOfYear (time) { 
  191.     var year = new Date(time).getFullYear(); 
  192.     return year + "-01-01 00:00:00"; 
  193. } 
  194.  
  195. /*获取某年最后一天*/ 
  196. getLastDayOfYear (time) { 
  197.     var year = new Date(time).getFullYear(); 
  198.     var dateString = year + "-12-01 00:00:00"; 
  199.     var endDay = this.getMonthOfDay(dateString); 
  200.     return year + "-12-" + endDay + " 23:59:59"; 
  201. } 
  202.  
  203. /*获取某个日期是当年中的第几天*/ 
  204. getDayOfYear (time) { 
  205.     var firstDayYear = this.getFirstDayOfYear(time); 
  206.     var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000; 
  207.     return Math.ceil(numSecond/(24*3600)); 
  208. } 
  209.  
  210. /*获取某个日期在这一年的第几周*/ 
  211. getDayOfYearWeek (time) { 
  212.     var numdays = this.getDayOfYear(time); 
  213.     return Math.ceil(numdays / 7); 
  214. } 

3. Array

  1. /*判断一个元素是否在数组中*/ 
  2. contains (arr, val) { 
  3.     return arr.indexOf(val) != -1 ? true : false; 
  4. } 
  5.  
  6. /** 
  7.  * @param  {arr} 数组 
  8.  * @param  {fn} 回调函数 
  9.  * @return {undefined} 
  10.  */ 
  11. each (arr, fn) { 
  12.     fn = fn || Function; 
  13.     var a = []; 
  14.     var args = Array.prototype.slice.call(arguments, 1); 
  15.     for(var i = 0; i < arr.length; i++) { 
  16.         var res = fn.apply(arr, [arr[i], i].concat(args)); 
  17.         if(res != null) a.push(res); 
  18.     } 
  19. } 
  20.  
  21. /** 
  22.  * @param  {arr} 数组 
  23.  * @param  {fn} 回调函数 
  24.  * @param  {thisObj} this指向 
  25.  * @return {Array}  
  26.  */ 
  27. map (arr, fn, thisObj) { 
  28.     var scope = thisObj || window; 
  29.     var a = []; 
  30.     for(var i = 0, j = arr.length; i < j; ++i) { 
  31.         var res = fn.call(scope, arr[i], i, this); 
  32.         if(res != null) a.push(res); 
  33.     } 
  34.     return a; 
  35. } 
  36.  
  37. /** 
  38.  * @param  {arr} 数组 
  39.  * @param  {type} 1：从小到大   2：从大到小   3：随机 
  40.  * @return {Array} 
  41.  */ 
  42. sort (arr, type = 1) { 
  43.     return arr.sort( (a, b) => { 
  44.         switch(type) { 
  45.             case 1: 
  46.                 return a - b; 
  47.             case 2: 
  48.                 return b - a; 
  49.             case 3: 
  50.                 return Math.random() - 0.5; 
  51.             default: 
  52.                 return arr; 
  53.         } 
  54.     }) 
  55. } 
  56.  
  57. /*去重*/ 
  58. unique (arr) { 
  59.     if ( Array.hasOwnProperty('from') ) { 
  60.         return Array.from(new Set(arr)); 
  61.     }else{ 
  62.         var n = {},r=[];  
  63.         for(var i = 0; i < arr.length; i++){ 
  64.             if (!n[arr[i]]){ 
  65.                 n[arr[i]] = true;  
  66.                 r.push(arr[i]); 
  67.             } 
  68.         } 
  69.         return r; 
  70.     } 
  71.     // 注：上面 else 里面的排重并不能区分 2 和 '2'，但能减少用indexOf带来的性能,暂时没找到替代的方法。。。 
  72.     /* 正确排重 
  73.     if ( Array.hasOwnProperty('from') ) { 
  74.         return Array.from(new Set(arr)) 
  75.     }else{ 
  76.         var r = [], NaNBol = true 
  77.         for(var i=0; i < arr.length; i++) { 
  78.             if (arr[i] !== arr[i]) { 
  79.                 if (NaNBol && r.indexOf(arr[i]) === -1) { 
  80.                     r.push(arr[i]) 
  81.                     NaNBol = false 
  82.                 } 
  83.             }else{ 
  84.                 if(r.indexOf(arr[i]) === -1) r.push(arr[i]) 
  85.             } 
  86.         } 
  87.         return r 
  88.     } 
  89.  
  90.      */ 
  91. } 
  92.  
  93. /*求两个集合的并集*/ 
  94. union (a, b) { 
  95.     var newArr = a.concat(b); 
  96.     return this.unique(newArr); 
  97. } 
  98.  
  99. /*求两个集合的交集*/ 
  100. intersect (a, b) { 
  101.     var _this = this; 
  102.     a = this.unique(a); 
  103.     return this.map(a, function(o) { 
  104.         return _this.contains(b, o) ? o : null; 
  105.     }); 
  106. } 
  107.  
  108. /*删除其中一个元素*/ 
  109. remove (arr, ele) { 
  110.     var index = arr.indexOf(ele); 
  111.     if(index > -1) { 
  112.         arr.splice(index, 1); 
  113.     } 
  114.     return arr; 
  115. } 
  116.  
  117. /*将类数组转换为数组的方法*/ 
  118. formArray (ary) { 
  119.     var arr = []; 
  120.     if(Array.isArray(ary)) { 
  121.         arr = ary; 
  122.     } else { 
  123.         arr = Array.prototype.slice.call(ary); 
  124.     }; 
  125.     return arr; 
  126. } 
  127.  
  128. /*最大值*/ 
  129. max (arr) { 
  130.     return Math.max.apply(null, arr); 
  131. } 
  132.  
  133. /*最小值*/ 
  134. min (arr) { 
  135.     return Math.min.apply(null, arr); 
  136. } 
  137.  
  138. /*求和*/ 
  139. sum (arr) { 
  140.     return arr.reduce( (pre, cur) => { 
  141.         return pre + cur 
  142.     }) 
  143. } 
  144.  
  145. /*平均值*/ 
  146. average (arr) { 
  147.     return this.sum(arr)/arr.length 
  148. } 

4. String 字符串操作

  1. /** 
  2.  * 去除空格 
  3.  * @param  {str} 
  4.  * @param  {type}  
  5.  *       type:  1-所有空格  2-前后空格  3-前空格 4-后空格 
  6.  * @return {String} 
  7.  */ 
  8. trim (str, type) { 
  9.     type = type || 1 
  10.     switch (type) { 
  11.         case 1: 
  12.             return str.replace(/\s+/g, ""); 
  13.         case 2: 
  14.             return str.replace(/(^\s*)|(\s*$)/g, ""); 
  15.         case 3: 
  16.             return str.replace(/(^\s*)/g, ""); 
  17.         case 4: 
  18.             return str.replace(/(\s*$)/g, ""); 
  19.         default: 
  20.             return str; 
  21.     } 
  22. } 
  23.  
  24. /** 
  25.  * @param  {str}  
  26.  * @param  {type} 
  27.  *       type:  1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写 
  28.  * @return {String} 
  29.  */ 
  30. changeCase (str, type) { 
  31.     type = type || 4 
  32.     switch (type) { 
  33.         case 1: 
  34.             return str.replace(/\b\w+\b/g, function (word) { 
  35.                 return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase(); 
  36.  
  37.             }); 
  38.         case 2: 
  39.             return str.replace(/\b\w+\b/g, function (word) { 
  40.                 return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase(); 
  41.             }); 
  42.         case 3: 
  43.             return str.split('').map( function(word){ 
  44.                 if (/[a-z]/.test(word)) { 
  45.                     return word.toUpperCase(); 
  46.                 }else{ 
  47.                     return word.toLowerCase() 
  48.                 } 
  49.             }).join('') 
  50.         case 4: 
  51.             return str.toUpperCase(); 
  52.         case 5: 
  53.             return str.toLowerCase(); 
  54.         default: 
  55.             return str; 
  56.     } 
  57. } 
  58.  
  59. /* 
  60.     检测密码强度 
  61. */ 
  62. checkPwd (str) { 
  63.     var Lv = 0; 
  64.     if (str.length < 6) { 
  65.         return Lv 
  66.     } 
  67.     if (/[0-9]/.test(str)) { 
  68.         Lv++ 
  69.     } 
  70.     if (/[a-z]/.test(str)) { 
  71.         Lv++ 
  72.     } 
  73.     if (/[A-Z]/.test(str)) { 
  74.         Lv++ 
  75.     } 
  76.     if (/[\.|-|_]/.test(str)) { 
  77.         Lv++ 
  78.     } 
  79.     return Lv; 
  80. } 
  81.  
  82. /*过滤html代码(把<>转换)*/ 
  83. filterTag (str) { 
  84.     str = str.replace(/&/ig, "&amp;"); 
  85.     str = str.replace(/</ig, "&lt;"); 
  86.     str = str.replace(/>/ig, "&gt;"); 
  87.     str = str.replace(" ", " "); 
  88.     return str; 
  89. } 

5. Number

  1. /*随机数范围*/ 
  2. random (min, max) { 
  3.     if (arguments.length === 2) { 
  4.         return Math.floor(min + Math.random() * ( (max+1) - min )) 
  5.     }else{ 
  6.         return null; 
  7.     } 
  8.  
  9. } 
  10.  
  11. /*将阿拉伯数字翻译成中文的大写数字*/ 
  12. numberToChinese (num) { 
  13.     var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"); 
  14.     var BB = new Array("", "十", "百", "仟", "萬", "億", "点", ""); 
  15.     var a = ("" + num).replace(/(^0*)/g, "").split("."), 
  16.         k = 0, 
  17.         re = ""; 
  18.     for(var i = a[0].length - 1; i >= 0; i--) { 
  19.         switch(k) { 
  20.             case 0: 
  21.                 re = BB[7] + re; 
  22.                 break; 
  23.             case 4: 
  24.                 if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$") 
  25.                     .test(a[0])) 
  26.                     re = BB[4] + re; 
  27.                 break; 
  28.             case 8: 
  29.                 re = BB[5] + re; 
  30.                 BB[7] = BB[5]; 
  31.                 k = 0; 
  32.                 break; 
  33.         } 
  34.         if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) 
  35.             re = AA[0] + re; 
  36.         if(a[0].charAt(i) != 0) 
  37.             re = AA[a[0].charAt(i)] + BB[k % 4] + re; 
  38.         k++; 
  39.     } 
  40.  
  41.     if(a.length > 1) // 加上小数部分(如果有小数部分) 
  42.     { 
  43.         re += BB[6]; 
  44.         for(var i = 0; i < a[1].length; i++) 
  45.             re += AA[a[1].charAt(i)]; 
  46.     } 
  47.     if(re == '一十') 
  48.         re = "十"; 
  49.     if(re.match(/^一/) && re.length == 3) 
  50.         re = re.replace("一", ""); 
  51.     return re; 
  52. } 
  53.  
  54. /*将数字转换为大写金额*/ 
  55. changeToChinese (Num) { 
  56.         //判断如果传递进来的不是字符的话转换为字符 
  57.         if(typeof Num == "number") { 
  58.             Num = new String(Num); 
  59.         }; 
  60.         Num = Num.replace(/,/g, "") //替换tomoney()中的“,” 
  61.         Num = Num.replace(/ /g, "") //替换tomoney()中的空格 
  62.         Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符 
  63.         if(isNaN(Num)) { //验证输入的字符是否为数字 
  64.             //alert("请检查小写金额是否正确"); 
  65.             return ""; 
  66.         }; 
  67.         //字符处理完毕后开始转换，采用前后两部分分别转换 
  68.         var part = String(Num).split("."); 
  69.         var newchar = ""; 
  70.         //小数点前进行转化 
  71.         for(var i = part[0].length - 1; i >= 0; i--) { 
  72.             if(part[0].length > 10) { 
  73.                 return ""; 
  74.                 //若数量超过拾亿单位，提示 
  75.             } 
  76.             var tmpnewchar = "" 
  77.             var perchar = part[0].charAt(i); 
  78.             switch(perchar) { 
  79.                 case "0": 
  80.                     tmpnewchar = "零" + tmpnewchar; 
  81.                     break; 
  82.                 case "1": 
  83.                     tmpnewchar = "壹" + tmpnewchar; 
  84.                     break; 
  85.                 case "2": 
  86.                     tmpnewchar = "贰" + tmpnewchar; 
  87.                     break; 
  88.                 case "3": 
  89.                     tmpnewchar = "叁" + tmpnewchar; 
  90.                     break; 
  91.                 case "4": 
  92.                     tmpnewchar = "肆" + tmpnewchar; 
  93.                     break; 
  94.                 case "5": 
  95.                     tmpnewchar = "伍" + tmpnewchar; 
  96.                     break; 
  97.                 case "6": 
  98.                     tmpnewchar = "陆" + tmpnewchar; 
  99.                     break; 
  100.                 case "7": 
  101.                     tmpnewchar = "柒" + tmpnewchar; 
  102.                     break; 
  103.                 case "8": 
  104.                     tmpnewchar = "捌" + tmpnewchar; 
  105.                     break; 
  106.                 case "9": 
  107.                     tmpnewchar = "玖" + tmpnewchar; 
  108.                     break; 
  109.             } 
  110.             switch(part[0].length - i - 1) { 
  111.                 case 0: 
  112.                     tmpnewchar = tmpnewchar + "元"; 
  113.                     break; 
  114.                 case 1: 
  115.                     if(perchar != 0) tmpnewchar = tmpnewchar + "拾"; 
  116.                     break; 
  117.                 case 2: 
  118.                     if(perchar != 0) tmpnewchar = tmpnewchar + "佰"; 
  119.                     break; 
  120.                 case 3: 
  121.                     if(perchar != 0) tmpnewchar = tmpnewchar + "仟"; 
  122.                     break; 
  123.                 case 4: 
  124.                     tmpnewchar = tmpnewchar + "万"; 
  125.                     break; 
  126.                 case 5: 
  127.                     if(perchar != 0) tmpnewchar = tmpnewchar + "拾"; 
  128.                     break; 
  129.                 case 6: 
  130.                     if(perchar != 0) tmpnewchar = tmpnewchar + "佰"; 
  131.                     break; 
  132.                 case 7: 
  133.                     if(perchar != 0) tmpnewchar = tmpnewchar + "仟"; 
  134.                     break; 
  135.                 case 8: 
  136.                     tmpnewchar = tmpnewchar + "亿"; 
  137.                     break; 
  138.                 case 9: 
  139.                     tmpnewchar = tmpnewchar + "拾"; 
  140.                     break; 
  141.             } 
  142.             var newchar = tmpnewchar + newchar; 
  143.         } 
  144.         //小数点之后进行转化 
  145.         if(Num.indexOf(".") != -1) { 
  146.             if(part[1].length > 2) { 
  147.                 // alert("小数点之后只能保留两位,系统将自动截断"); 
  148.                 part[1] = part[1].substr(0, 2) 
  149.             } 
  150.             for(i = 0; i < part[1].length; i++) { 
  151.                 tmpnewchar = "" 
  152.                 perchar = part[1].charAt(i) 
  153.                 switch(perchar) { 
  154.                     case "0": 
  155.                         tmpnewchar = "零" + tmpnewchar; 
  156.                         break; 
  157.                     case "1": 
  158.                         tmpnewchar = "壹" + tmpnewchar; 
  159.                         break; 
  160.                     case "2": 
  161.                         tmpnewchar = "贰" + tmpnewchar; 
  162.                         break; 
  163.                     case "3": 
  164.                         tmpnewchar = "叁" + tmpnewchar; 
  165.                         break; 
  166.                     case "4": 
  167.                         tmpnewchar = "肆" + tmpnewchar; 
  168.                         break; 
  169.                     case "5": 
  170.                         tmpnewchar = "伍" + tmpnewchar; 
  171.                         break; 
  172.                     case "6": 
  173.                         tmpnewchar = "陆" + tmpnewchar; 
  174.                         break; 
  175.                     case "7": 
  176.                         tmpnewchar = "柒" + tmpnewchar; 
  177.                         break; 
  178.                     case "8": 
  179.                         tmpnewchar = "捌" + tmpnewchar; 
  180.                         break; 
  181.                     case "9": 
  182.                         tmpnewchar = "玖" + tmpnewchar; 
  183.                         break; 
  184.                 } 
  185.                 if(i == 0) tmpnewchar = tmpnewchar + "角"; 
  186.                 if(i == 1) tmpnewchar = tmpnewchar + "分"; 
  187.                 newchar = newchar + tmpnewchar; 
  188.             } 
  189.         } 
  190.         //替换所有无用汉字 
  191.         while(newchar.search("零零") != -1) 
  192.             newchar = newchar.replace("零零", "零"); 
  193.         newchar = newchar.replace("零亿", "亿"); 
  194.         newchar = newchar.replace("亿万", "亿"); 
  195.         newchar = newchar.replace("零万", "万"); 
  196.         newchar = newchar.replace("零元", "元"); 
  197.         newchar = newchar.replace("零角", ""); 
  198.         newchar = newchar.replace("零分", ""); 
  199.         if(newchar.charAt(newchar.length - 1) == "元") { 
  200.             newchar = newchar + "整" 
  201.         } 
  202.         return newchar; 
  203.     } 

6. Http

  1. /** 
  2.  * @param  {setting} 
  3.  */ 
  4. ajax(setting){ 
  5.     //设置参数的初始值 
  6.     var opts={ 
  7.         method: (setting.method || "GET").toUpperCase(), //请求方式 
  8.         url: setting.url || "", // 请求地址 
  9.         async: setting.async || true, // 是否异步 
  10.         dataType: setting.dataType || "json", // 解析方式 
  11.         data: setting.data || "", // 参数 
  12.         success: setting.success || function(){}, // 请求成功回调 
  13.         error: setting.error || function(){} // 请求失败回调 
  14.     } 
  15.  
  16.     // 参数格式化 
  17.     function params_format (obj) { 
  18.         var str = '' 
  19.         for (var i in obj) { 
  20.             str += i + '=' + obj[i] + '&' 
  21.         } 
  22.         return str.split('').slice(0, -1).join('') 
  23.     } 
  24.  
  25.     // 创建ajax对象 
  26.     var xhr=new XMLHttpRequest(); 
  27.  
  28.     // 连接服务器open(方法GET/POST，请求地址， 异步传输) 
  29.     if(opts.method == 'GET'){ 
  30.         xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async); 
  31.         xhr.send(); 
  32.     }else{ 
  33.         xhr.open(opts.method, opts.url, opts.async); 
  34.         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  35.         xhr.send(opts.data); 
  36.     } 
  37.  
  38.     /* 
  39.     ** 每当readyState改变时，就会触发onreadystatechange事件 
  40.     ** readyState属性存储有XMLHttpRequest的状态信息 
  41.     ** 0 ：请求未初始化 
  42.     ** 1 ：服务器连接已建立 
  43.     ** 2 ：请求已接受 
  44.     ** 3 : 请求处理中 
  45.     ** 4 ：请求已完成，且相应就绪 
  46.     */ 
  47.     xhr.onreadystatechange = function() { 
  48.         if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) { 
  49.             switch(opts.dataType){ 
  50.                 case "json": 
  51.                     var json = JSON.parse(xhr.responseText); 
  52.                     opts.success(json); 
  53.                     break; 
  54.                 case "xml": 
  55.                     opts.success(xhr.responseXML); 
  56.                     break; 
  57.                 default: 
  58.                     opts.success(xhr.responseText); 
  59.                     break; 
  60.             } 
  61.         } 
  62.     } 
  63.  
  64.     xhr.onerror = function(err) { 
  65.         opts.error(err); 
  66.     } 
  67. } 
  68.  
  69. /** 
  70.  * @param  {url} 
  71.  * @param  {setting} 
  72.  * @return {Promise} 
  73.  */ 
  74. fetch(url, setting) { 
  75.     //设置参数的初始值 
  76.     let opts={ 
  77.         method: (setting.method || 'GET').toUpperCase(), //请求方式 
  78.         headers : setting.headers  || {}, // 请求头设置 
  79.         credentials : setting.credentials  || true, // 设置cookie是否一起发送 
  80.         body: setting.body || {}, 
  81.         mode : setting.mode  || 'no-cors', // 可以设置 cors, no-cors, same-origin 
  82.         redirect : setting.redirect  || 'follow', // follow, error, manual 
  83.         cache : setting.cache  || 'default' // 设置 cache 模式 (default, reload, no-cache) 
  84.     } 
  85.     let dataType = setting.dataType || "json", // 解析方式   
  86.         data = setting.data || "" // 参数 
  87.  
  88.     // 参数格式化 
  89.     function params_format (obj) { 
  90.         var str = '' 
  91.         for (var i in obj) { 
  92.             str += `${i}=${obj[i]}&` 
  93.         } 
  94.         return str.split('').slice(0, -1).join('') 
  95.     } 
  96.  
  97.     if (opts.method === 'GET') { 
  98.         url = url + (data?`?${params_format(data)}`:'') 
  99.     }else{ 
  100.         setting.body = data || {} 
  101.     } 
  102.  
  103.     return new Promise( (resolve, reject) => { 
  104.         fetch(url, opts).then( async res => { 
  105.             let data = dataType === 'text' ? await res.text() : 
  106.                 dataType === 'blob' ? await res.blob() : await res.json()  
  107.             resolve(data) 
  108.         }).catch( e => { 
  109.             reject(e) 
  110.         }) 
  111.     }) 
  112.  
  113. } 

7. DOM

  1. $ (selector){  
  2.     var type = selector.substring(0, 1); 
  3.     if (type === '#') { 
  4.         if (document.querySelecotor) return document.querySelector(selector) 
  5.             return document.getElementById(selector.substring(1)) 
  6.  
  7.     }else if (type === '.') { 
  8.         if (document.querySelecotorAll) return document.querySelectorAll(selector) 
  9.             return document.getElementsByClassName(selector.substring(1)) 
  10.     }else{ 
  11.         return document['querySelectorAll' ? 'querySelectorAll':'getElementsByTagName'](selector) 
  12.     } 
  13. }  
  14.  
  15. /*检测类名*/ 
  16. hasClass (ele, name) { 
  17.     return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)')); 
  18. } 
  19.  
  20. /*添加类名*/ 
  21. addClass (ele, name) { 
  22.     if (!this.hasClass(ele, name)) ele.className += " " + name; 
  23. } 
  24.  
  25. /*删除类名*/ 
  26. removeClass (ele, name) { 
  27.     if (this.hasClass(ele, name)) { 
  28.         var reg = new RegExp('(\\s|^)' + name + '(\\s|$)'); 
  29.         ele.className = ele.className.replace(reg, ''); 
  30.     } 
  31. } 
  32.  
  33. /*替换类名*/ 
  34. replaceClass (ele, newName, oldName) { 
  35.     this.removeClass(ele, oldName); 
  36.     this.addClass(ele, newName); 
  37. } 
  38.  
  39. /*获取兄弟节点*/ 
  40. siblings (ele) { 
  41.     console.log(ele.parentNode) 
  42.     var chid = ele.parentNode.children,eleMatch = [];  
  43.     for(var i = 0, len = chid.length; i < len; i ++){  
  44.         if(chid[i] != ele){  
  45.             eleMatch.push(chid[i]);  
  46.         }  
  47.     }  
  48.     return eleMatch; 
  49. } 
  50.  
  51. /*获取行间样式属性*/ 
  52. getByStyle (obj,name){ 
  53.     if(obj.currentStyle){ 
  54.         return  obj.currentStyle[name]; 
  55.     }else{ 
  56.         return  getComputedStyle(obj,false)[name]; 
  57.     } 
  58. } 

8. Storage 储存操作

  1. class StorageFn { 
  2.     constructor () { 
  3.         this.ls = window.localStorage; 
  4.         this.ss = window.sessionStorage; 
  5.     } 
  6.  
  7.     /*-----------------cookie---------------------*/ 
  8.     /*设置cookie*/ 
  9.     setCookie (name, value, day) { 
  10.         var setting = arguments[0]; 
  11.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){ 
  12.             for (var i in setting) { 
  13.                 var oDate = new Date(); 
  14.                 oDate.setDate(oDate.getDate() + day); 
  15.                 document.cookie = i + '=' + setting[i] + ';expires=' + oDate; 
  16.             } 
  17.         }else{ 
  18.             var oDate = new Date(); 
  19.             oDate.setDate(oDate.getDate() + day); 
  20.             document.cookie = name + '=' + value + ';expires=' + oDate; 
  21.         } 
  22.  
  23.     } 
  24.  
  25.     /*获取cookie*/ 
  26.     getCookie (name) { 
  27.         var arr = document.cookie.split('; '); 
  28.         for (var i = 0; i < arr.length; i++) { 
  29.             var arr2 = arr[i].split('='); 
  30.             if (arr2[0] == name) { 
  31.                 return arr2[1]; 
  32.             } 
  33.         } 
  34.         return ''; 
  35.     } 
  36.  
  37.     /*删除cookie*/ 
  38.     removeCookie (name) { 
  39.         this.setCookie(name, 1, -1); 
  40.     } 
  41.  
  42.     /*-----------------localStorage---------------------*/ 
  43.     /*设置localStorage*/ 
  44.     setLocal(key, val) { 
  45.         var setting = arguments[0]; 
  46.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){ 
  47.             for(var i in setting){ 
  48.                 this.ls.setItem(i, JSON.stringify(setting[i])) 
  49.             } 
  50.         }else{ 
  51.             this.ls.setItem(key, JSON.stringify(val)) 
  52.         } 
  53.  
  54.     } 
  55.  
  56.     /*获取localStorage*/ 
  57.     getLocal(key) { 
  58.         if (key) return JSON.parse(this.ls.getItem(key)) 
  59.         return null; 
  60.  
  61.     } 
  62.  
  63.     /*移除localStorage*/ 
  64.     removeLocal(key) { 
  65.         this.ls.removeItem(key) 
  66.     } 
  67.  
  68.     /*移除所有localStorage*/ 
  69.     clearLocal() { 
  70.         this.ls.clear() 
  71.     } 
  72.  
  73.     /*-----------------sessionStorage---------------------*/ 
  74.     /*设置sessionStorage*/ 
  75.     setSession(key, val) { 
  76.         var setting = arguments[0]; 
  77.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){ 
  78.             for(var i in setting){ 
  79.                 this.ss.setItem(i, JSON.stringify(setting[i])) 
  80.             } 
  81.         }else{ 
  82.             this.ss.setItem(key, JSON.stringify(val)) 
  83.         } 
  84.  
  85.     } 
  86.  
  87.     /*获取sessionStorage*/ 
  88.     getSession(key) { 
  89.         if (key) return JSON.parse(this.ss.getItem(key)) 
  90.         return null; 
  91.  
  92.     } 
  93.  
  94.     /*移除sessionStorage*/ 
  95.     removeSession(key) { 
  96.         this.ss.removeItem(key) 
  97.     } 
  98.  
  99.     /*移除所有sessionStorage*/ 
  100.     clearSession() { 
  101.         this.ss.clear() 
  102.     } 
  103.  
  104. } 

9. Other 其它操作

  1. /*获取网址参数*/ 
  2. getURL(name){ 
  3.     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
  4.     var r = decodeURI(window.location.search).substr(1).match(reg); 
  5.     if(r!=null) return  r[2]; return null; 
  6. } 
  7.  
  8. /*获取全部url参数,并转换成json对象*/ 
  9. getUrlAllParams (url) { 
  10.     var url = url ? url : window.location.href; 
  11.     var _pa = url.substring(url.indexOf('?') + 1), 
  12.         _arrS = _pa.split('&'), 
  13.         _rs = {}; 
  14.     for (var i = 0, _len = _arrS.length; i < _len; i++) { 
  15.         var pos = _arrS[i].indexOf('='); 
  16.         if (pos == -1) { 
  17.             continue; 
  18.         } 
  19.         var name = _arrS[i].substring(0, pos), 
  20.             value = window.decodeURIComponent(_arrS[i].substring(pos + 1)); 
  21.         _rs[name] = value; 
  22.     } 
  23.     return _rs; 
  24. } 
  25.  
  26. /*删除url指定参数，返回url*/ 
  27. delParamsUrl(url, name){ 
  28.     var baseUrl = url.split('?')[0] + '?'; 
  29.     var query = url.split('?')[1]; 
  30.     if (query.indexOf(name)>-1) { 
  31.         var obj = {} 
  32.         var arr = query.split("&"); 
  33.         for (var i = 0; i < arr.length; i++) { 
  34.             arr[i] = arr[i].split("="); 
  35.             obj[arr[i][0]] = arr[i][1]; 
  36.         }; 
  37.         delete obj[name]; 
  38.         var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&"); 
  39.         return url 
  40.     }else{ 
  41.         return url; 
  42.     } 
  43. } 
  44.  
  45. /*获取十六进制随机颜色*/ 
  46. getRandomColor () { 
  47.     return '#' + (function(h) { 
  48.         return new Array(7 - h.length).join("0") + h; 
  49.     })((Math.random() * 0x1000000 << 0).toString(16)); 
  50. } 
  51.  
  52. /*图片加载*/ 
  53. imgLoadAll(arr,callback){ 
  54.     var arrImg = [];  
  55.     for (var i = 0; i < arr.length; i++) { 
  56.         var img = new Image(); 
  57.         img.src = arr[i]; 
  58.         img.onload = function(){ 
  59.             arrImg.push(this); 
  60.             if (arrImg.length == arr.length) { 
  61.                 callback && callback(); 
  62.             } 
  63.         } 
  64.     } 
  65. } 
  66.  
  67. /*音频加载*/ 
  68. loadAudio(src, callback) { 
  69.     var audio = new Audio(src); 
  70.     audio.onloadedmetadata = callback; 
  71.     audio.src = src; 
  72. } 
  73.  
  74. /*DOM转字符串*/ 
  75. domToStirng(htmlDOM){ 
  76.     var div= document.createElement("div"); 
  77.     div.appendChild(htmlDOM); 
  78.     return div.innerHTML 
  79. } 
  80.  
  81. /*字符串转DOM*/ 
  82. stringToDom(htmlString){ 
  83.     var div= document.createElement("div"); 
  84.     div.innerHTML=htmlString; 
  85.     return div.children[0]; 
  86. } 
  87.  
  88. /** 
  89.  * 光标所在位置插入字符，并设置光标位置 
  90.  *  
  91.  * @param {dom} 输入框 
  92.  * @param {val} 插入的值 
  93.  * @param {posLen} 光标位置处在 插入的值的哪个位置 
  94.  */ 
  95. setCursorPosition (dom,val,posLen) { 
  96.     var cursorPosition = 0; 
  97.     if(dom.selectionStart){ 
  98.         cursorPosition = dom.selectionStart; 
  99.     } 
  100.     this.insertAtCursor(dom,val); 
  101.     dom.focus(); 
  102.     console.log(posLen) 
  103.     dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length)); 
  104. } 
  105.  
  106. /*光标所在位置插入字符*/ 
  107. insertAtCursor(dom, val) { 
  108.     if (document.selection){ 
  109.         dom.focus(); 
  110.         sel = document.selection.createRange(); 
  111.         sel.text = val; 
  112.         sel.select(); 
  113.     }else if (dom.selectionStart || dom.selectionStart == '0'){ 
  114.         let startPos = dom.selectionStart; 
  115.         let endPos = dom.selectionEnd; 
  116.         let restoreTop = dom.scrollTop; 
  117.         dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length); 
  118.         if (restoreTop > 0){ 
  119.             dom.scrollTop = restoreTop; 
  120.         } 
  121.         dom.focus(); 
  122.         dom.selectionStart = startPos + val.length; 
  123.         dom.selectionEnd = startPos + val.length; 
  124.     } else { 
  125.         dom.value += val; 
  126.         dom.focus(); 
  127.     } 
  128. } 

CSS

1. pc-reset PC样式初始化

  1. /* normalize.css */  
  2.   
  3. html {  
  4.   line-height: 1.15;  
  5.   /* 1 */  
  6.   -ms-text-size-adjust: 100%;  
  7.   /* 2 */  
  8.   -webkit-text-size-adjust: 100%;  
  9.   /* 2 */  
  10. }  
  11.   
  12. body {  
  13.   margin: 0;  
  14. }  
  15.   
  16. article,  
  17. aside,  
  18. footer,  
  19. header,  
  20. nav,  
  21. section {  
  22.   display: block;  
  23. }  
  24.   
  25. h1 {  
  26.   font-size: 2em;  
  27.   margin: 0.67em 0;  
  28. }  
  29.   
  30. figcaption,  
  31. figure,  
  32. main {  
  33.   /* 1 */  
  34.   display: block;  
  35. }  
  36.   
  37. figure {  
  38.   margin: 1em 40px;  
  39. }  
  40.   
  41. hr {  
  42.   box-sizing: content-box;  
  43.   /* 1 */  
  44.   height: 0;  
  45.   /* 1 */  
  46.   overflow: visible;  
  47.   /* 2 */  
  48. }  
  49.   
  50. pre {  
  51.   font-family: monospace, monospace;  
  52.   /* 1 */  
  53.   font-size: 1em;  
  54.   /* 2 */  
  55. }  
  56.   
  57. a {  
  58.   background-color: transparent;  
  59.   /* 1 */  
  60.   -webkit-text-decoration-skip: objects;  
  61.   /* 2 */  
  62. }  
  63.   
  64. abbr[title] {  
  65.   border-bottom: none;  
  66.   /* 1 */  
  67.   text-decoration: underline;  
  68.   /* 2 */  
  69.   text-decoration: underline dotted;  
  70.   /* 2 */  
  71. }  
  72.   
  73. b,  
  74. strong {  
  75.   font-weight: inherit;  
  76. }  
  77.   
  78. b,  
  79. strong {  
  80.   font-weight: bolder;  
  81. }  
  82.   
  83. code,  
  84. kbd,  
  85. samp {  
  86.   font-family: monospace, monospace;  
  87.   /* 1 */  
  88.   font-size: 1em;  
  89.   /* 2 */  
  90. }  
  91.   
  92. dfn {  
  93.   font-style: italic;  
  94. }  
  95.   
  96. mark {  
  97.   background-color: #ff0;  
  98.   color: #000;  
  99. }  
  100.   
  101. small {  
  102.   font-size: 80%;  
  103. }  
  104.   
  105. sub,  
  106. sup {  
  107.   font-size: 75%;  
  108.   line-height: 0;  
  109.   position: relative;  
  110.   vertical-align: baseline;  
  111. }  
  112.   
  113. sub {  
  114.   bottom: -0.25em;  
  115. }  
  116.   
  117. sup {  
  118.   top: -0.5em;  
  119. }  
  120.   
  121. audio,  
  122. video {  
  123.   display: inline-block;  
  124. }  
  125.   
  126. audio:not([controls]) {  
  127.   display: none;  
  128.   height: 0;  
  129. }  
  130.   
  131. img {  
  132.   border-style: none;  
  133. }  
  134.   
  135. svg:not(:root) {  
  136.   overflow: hidden;  
  137. }  
  138.   
  139. button,  
  140. input,  
  141. optgroup,  
  142. select,  
  143. textarea {  
  144.   font-family: sans-serif;  
  145.   /* 1 */  
  146.   font-size: 100%;  
  147.   /* 1 */  
  148.   line-height: 1.15;  
  149.   /* 1 */  
  150.   margin: 0;  
  151.   /* 2 */  
  152. }  
  153.   
  154. button,  
  155. input {  
  156.   /* 1 */  
  157.   overflow: visible;  
  158. }  
  159.   
  160. button,  
  161. select {  
  162.   /* 1 */  
  163.   text-transform: none;  
  164. }  
  165.   
  166. button,  
  167. html [type="button"],  
  168.   
  169. /* 1 */  
  170.   
  171. [type="reset"],  
  172. [type="submit"] {  
  173.   -webkit-appearance: button;  
  174.   /* 2 */  
  175. }  
  176.   
  177. button::-moz-focus-inner,  
  178. [type="button"]::-moz-focus-inner,  
  179. [type="reset"]::-moz-focus-inner,  
  180. [type="submit"]::-moz-focus-inner {  
  181.   border-style: none;  
  182.   padding: 0;  
  183. }  
  184.   
  185. button:-moz-focusring,  
  186. [type="button"]:-moz-focusring,  
  187. [type="reset"]:-moz-focusring,  
  188. [type="submit"]:-moz-focusring {  
  189.   outline: 1px dotted ButtonText;  
  190. }  
  191.   
  192. fieldset {  
  193.   padding: 0.35em 0.75em 0.625em;  
  194. }  
  195.   
  196. legend {  
  197.   box-sizing: border-box;  
  198.   /* 1 */  
  199.   color: inherit;  
  200.   /* 2 */  
  201.   display: table;  
  202.   /* 1 */  
  203.   max-width: 100%;  
  204.   /* 1 */  
  205.   padding: 0;  
  206.   /* 3 */  
  207.   white-space: normal;  
  208.   /* 1 */  
  209. }  
  210.   
  211. progress {  
  212.   display: inline-block;  
  213.   /* 1 */  
  214.   vertical-align: baseline;  
  215.   /* 2 */  
  216. }  
  217.   
  218. textarea {  
  219.   overflow: auto;  
  220. }  
  221.   
  222. [type="checkbox"],  
  223. [type="radio"] {  
  224.   box-sizing: border-box;  
  225.   /* 1 */  
  226.   padding: 0;  
  227.   /* 2 */  
  228. }  
  229.   
  230. [type="number"]::-webkit-inner-spin-button,  
  231. [type="number"]::-webkit-outer-spin-button {  
  232.   height: auto;  
  233. }  
  234.   
  235. [type="search"] {  
  236.   -webkit-appearance: textfield;  
  237.   /* 1 */  
  238.   outline-offset: -2px;  
  239.   /* 2 */  
  240. }  
  241.   
  242. [type="search"]::-webkit-search-cancel-button,  
  243. [type="search"]::-webkit-search-decoration {  
  244.   -webkit-appearance: none;  
  245. }  
  246.   
  247.  ::-webkit-file-upload-button {  
  248.   -webkit-appearance: button;  
  249.   /* 1 */  
  250.   font: inherit;  
  251.   /* 2 */  
  252. }  
  253.   
  254. details,  
  255.   
  256. /* 1 */  
  257.   
  258. menu {  
  259.   display: block;  
  260. }  
  261.   
  262. summary {  
  263.   display: list-item;  
  264. }  
  265.   
  266. canvas {  
  267.   display: inline-block;  
  268. }  
  269.   
  270. template {  
  271.   display: none;  
  272. }  
  273.   
  274. [hidden] {  
  275.   display: none;  
  276. }  
  277.   
  278. /* reset */  
  279.   
  280. html,  
  281. body,  
  282. h1,  
  283. h2,  
  284. h3,  
  285. h4,  
  286. h5,  
  287. h6,  
  288. div,  
  289. dl,  
  290. dt,  
  291. dd,  
  292. ul,  
  293. ol,  
  294. li,  
  295. p,  
  296. blockquote,  
  297. pre,  
  298. hr,  
  299. figure,  
  300. table,  
  301. caption,  
  302. th,  
  303. td,  
  304. form,  
  305. fieldset,  
  306. legend,  
  307. input,  
  308. button,  
  309. textarea,  
  310. menu {  
  311.   margin: 0;  
  312.   padding: 0;  
  313.   box-sizing: border-box;  
  314. }  

2. Phone-reset

  1. /* normalize.css */  
  2.   
  3. html {  
  4.   line-height: 1.15;  
  5.   /* 1 */  
  6.   -ms-text-size-adjust: 100%;  
  7.   /* 2 */  
  8.   -webkit-text-size-adjust: 100%;  
  9.   /* 2 */  
  10. }  
  11.   
  12. body {  
  13.   margin: 0;  
  14. }  
  15.   
  16. article,  
  17. aside,  
  18. footer,  
  19. header,  
  20. nav,  
  21. section {  
  22.   display: block;  
  23. }  
  24.   
  25. h1 {  
  26.   font-size: 2em;  
  27.   margin: 0.67em 0;  
  28. }  
  29.   
  30. figcaption,  
  31. figure,  
  32. main {  
  33.   /* 1 */  
  34.   display: block;  
  35. }  
  36.   
  37. figure {  
  38.   margin: 1em 40px;  
  39. }  
  40.   
  41. hr {  
  42.   box-sizing: content-box;  
  43.   /* 1 */  
  44.   height: 0;  
  45.   /* 1 */  
  46.   overflow: visible;  
  47.   /* 2 */  
  48. }  
  49.   
  50. pre {  
  51.   font-family: monospace, monospace;  
  52.   /* 1 */  
  53.   font-size: 1em;  
  54.   /* 2 */  
  55. }  
  56.   
  57. a {  
  58.   background-color: transparent;  
  59.   /* 1 */  
  60.   -webkit-text-decoration-skip: objects;  
  61.   /* 2 */  
  62. }  
  63.   
  64. abbr[title] {  
  65.   border-bottom: none;  
  66.   /* 1 */  
  67.   text-decoration: underline;  
  68.   /* 2 */  
  69.   text-decoration: underline dotted;  
  70.   /* 2 */  
  71. }  
  72.   
  73. b,  
  74. strong {  
  75.   font-weight: inherit;  
  76. }  
  77.   
  78. b,  
  79. strong {  
  80.   font-weight: bolder;  
  81. }  
  82.   
  83. code,  
  84. kbd,  
  85. samp {  
  86.   font-family: monospace, monospace;  
  87.   /* 1 */  
  88.   font-size: 1em;  
  89.   /* 2 */  
  90. }  
  91.   
  92. dfn {  
  93.   font-style: italic;  
  94. }  
  95.   
  96. mark {  
  97.   background-color: #ff0;  
  98.   color: #000;  
  99. }  
  100.   
  101. small {  
  102.   font-size: 80%;  
  103. }  
  104.   
  105. sub,  
  106. sup {  
  107.   font-size: 75%;  
  108.   line-height: 0;  
  109.   position: relative;  
  110.   vertical-align: baseline;  
  111. }  
  112.   
  113. sub {  
  114.   bottom: -0.25em;  
  115. }  
  116.   
  117. sup {  
  118.   top: -0.5em;  
  119. }  
  120.   
  121. audio,  
  122. video {  
  123.   display: inline-block;  
  124. }  
  125.   
  126. audio:not([controls]) {  
  127.   display: none;  
  128.   height: 0;  
  129. }  
  130.   
  131. img {  
  132.   border-style: none;  
  133. }  
  134.   
  135. svg:not(:root) {  
  136.   overflow: hidden;  
  137. }  
  138.   
  139. button,  
  140. input,  
  141. optgroup,  
  142. select,  
  143. textarea {  
  144.   font-family: sans-serif;  
  145.   /* 1 */  
  146.   font-size: 100%;  
  147.   /* 1 */  
  148.   line-height: 1.15;  
  149.   /* 1 */  
  150.   margin: 0;  
  151.   /* 2 */  
  152. }  
  153.   
  154. button,  
  155. input {  
  156.   /* 1 */  
  157.   overflow: visible;  
  158. }  
  159.   
  160. button,  
  161. select {  
  162.   /* 1 */  
  163.   text-transform: none;  
  164. }  
  165.   
  166. button,  
  167. html [type="button"],  
  168.   
  169. /* 1 */  
  170.   
  171. [type="reset"],  
  172. [type="submit"] {  
  173.   -webkit-appearance: button;  
  174.   /* 2 */  
  175. }  
  176.   
  177. button::-moz-focus-inner,  
  178. [type="button"]::-moz-focus-inner,  
  179. [type="reset"]::-moz-focus-inner,  
  180. [type="submit"]::-moz-focus-inner {  
  181.   border-style: none;  
  182.   padding: 0;  
  183. }  
  184.   
  185. button:-moz-focusring,  
  186. [type="button"]:-moz-focusring,  
  187. [type="reset"]:-moz-focusring,  
  188. [type="submit"]:-moz-focusring {  
  189.   outline: 1px dotted ButtonText;  
  190. }  
  191.   
  192. fieldset {  
  193.   padding: 0.35em 0.75em 0.625em;  
  194. }  
  195.   
  196. legend {  
  197.   box-sizing: border-box;  
  198.   /* 1 */  
  199.   color: inherit;  
  200.   /* 2 */  
  201.   display: table;  
  202.   /* 1 */  
  203.   max-width: 100%;  
  204.   /* 1 */  
  205.   padding: 0;  
  206.   /* 3 */  
  207.   white-space: normal;  
  208.   /* 1 */  
  209. }  
  210.   
  211. progress {  
  212.   display: inline-block;  
  213.   /* 1 */  
  214.   vertical-align: baseline;  
  215.   /* 2 */  
  216. }  
  217.   
  218. textarea {  
  219.   overflow: auto;  
  220. }  
  221.   
  222. [type="checkbox"],  
  223. [type="radio"] {  
  224.   box-sizing: border-box;  
  225.   /* 1 */  
  226.   padding: 0;  
  227.   /* 2 */  
  228. }  
  229.   
  230. [type="number"]::-webkit-inner-spin-button,  
  231. [type="number"]::-webkit-outer-spin-button {  
  232.   height: auto;  
  233. }  
  234.   
  235. [type="search"] {  
  236.   -webkit-appearance: textfield;  
  237.   /* 1 */  
  238.   outline-offset: -2px;  
  239.   /* 2 */  
  240. }  
  241.   
  242. [type="search"]::-webkit-search-cancel-button,  
  243. [type="search"]::-webkit-search-decoration {  
  244.   -webkit-appearance: none;  
  245. }  
  246.   
  247.  ::-webkit-file-upload-button {  
  248.   -webkit-appearance: button;  
  249.   /* 1 */  
  250.   font: inherit;  
  251.   /* 2 */  
  252. }  
  253.   
  254. details,  
  255.   
  256. /* 1 */  
  257.   
  258. menu {  
  259.   display: block;  
  260. }  
  261.   
  262. summary {  
  263.   display: list-item;  
  264. }  
  265.   
  266. canvas {  
  267.   display: inline-block;  
  268. }  
  269.   
  270. template {  
  271.   display: none;  
  272. }  
  273.   
  274. [hidden] {  
  275.   display: none;  
  276. }  
  277.   
  278. /* reset */  
  279.   
  280. html,  
  281. body,  
  282. h1,  
  283. h2,  
  284. h3,  
  285. h4,  
  286. h5,  
  287. h6,  
  288. div,  
  289. dl,  
  290. dt,  
  291. dd,  
  292. ul,  
  293. ol,  
  294. li,  
  295. p,  
  296. blockquote,  
  297. pre,  
  298. hr,  
  299. figure,  
  300. table,  
  301. caption,  
  302. th,  
  303. td,  
  304. form,  
  305. fieldset,  
  306. legend,  
  307. input,  
  308. button,  
  309. textarea,  
  310. menu {  
  311.   margin: 0;  
  312.   padding: 0;  
  313.   box-sizing: border-box;  
  314. }  
  315.   
  316. html,  
  317. body {  
  318.   /* 禁止选中文本 */  
  319.   -webkit-user-select: none;  
  320.   user-select: none;  
  321.   font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif  
  322. }  
  323.   
  324. /* 禁止长按链接与图片弹出菜单 */  
  325.   
  326. a,  
  327. img {  
  328.   -webkit-touch-callout: none;  
  329. }  
  330.   
  331. /*ios android去除自带阴影的样式*/  
  332.   
  333. a,  
  334. input {  
  335.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  336. }  
  337.   
  338. input[type="text"] {  
  339.   -webkit-appearance: none;  
  340. }  
  341. 2. Phone-reset  
  342. /* normalize.css */  
  343.   
  344. html {  
  345.   line-height: 1.15;  
  346.   /* 1 */  
  347.   -ms-text-size-adjust: 100%;  
  348.   /* 2 */  
  349.   -webkit-text-size-adjust: 100%;  
  350.   /* 2 */  
  351. }  
  352.   
  353. body {  
  354.   margin: 0;  
  355. }  
  356.   
  357. article,  
  358. aside,  
  359. footer,  
  360. header,  
  361. nav,  
  362. section {  
  363.   display: block;  
  364. }  
  365.   
  366. h1 {  
  367.   font-size: 2em;  
  368.   margin: 0.67em 0;  
  369. }  
  370.   
  371. figcaption,  
  372. figure,  
  373. main {  
  374.   /* 1 */  
  375.   display: block;  
  376. }  
  377.   
  378. figure {  
  379.   margin: 1em 40px;  
  380. }  
  381.   
  382. hr {  
  383.   box-sizing: content-box;  
  384.   /* 1 */  
  385.   height: 0;  
  386.   /* 1 */  
  387.   overflow: visible;  
  388.   /* 2 */  
  389. }  
  390.   
  391. pre {  
  392.   font-family: monospace, monospace;  
  393.   /* 1 */  
  394.   font-size: 1em;  
  395.   /* 2 */  
  396. }  
  397.   
  398. a {  
  399.   background-color: transparent;  
  400.   /* 1 */  
  401.   -webkit-text-decoration-skip: objects;  
  402.   /* 2 */  
  403. }  
  404.   
  405. abbr[title] {  
  406.   border-bottom: none;  
  407.   /* 1 */  
  408.   text-decoration: underline;  
  409.   /* 2 */  
  410.   text-decoration: underline dotted;  
  411.   /* 2 */  
  412. }  
  413.   
  414. b,  
  415. strong {  
  416.   font-weight: inherit;  
  417. }  
  418.   
  419. b,  
  420. strong {  
  421.   font-weight: bolder;  
  422. }  
  423.   
  424. code,  
  425. kbd,  
  426. samp {  
  427.   font-family: monospace, monospace;  
  428.   /* 1 */  
  429.   font-size: 1em;  
  430.   /* 2 */  
  431. }  
  432.   
  433. dfn {  
  434.   font-style: italic;  
  435. }  
  436.   
  437. mark {  
  438.   background-color: #ff0;  
  439.   color: #000;  
  440. }  
  441.   
  442. small {  
  443.   font-size: 80%;  
  444. }  
  445.   
  446. sub,  
  447. sup {  
  448.   font-size: 75%;  
  449.   line-height: 0;  
  450.   position: relative;  
  451.   vertical-align: baseline;  
  452. }  
  453.   
  454. sub {  
  455.   bottom: -0.25em;  
  456. }  
  457.   
  458. sup {  
  459.   top: -0.5em;  
  460. }  
  461.   
  462. audio,  
  463. video {  
  464.   display: inline-block;  
  465. }  
  466.   
  467. audio:not([controls]) {  
  468.   display: none;  
  469.   height: 0;  
  470. }  
  471.   
  472. img {  
  473.   border-style: none;  
  474. }  
  475.   
  476. svg:not(:root) {  
  477.   overflow: hidden;  
  478. }  
  479.   
  480. button,  
  481. input,  
  482. optgroup,  
  483. select,  
  484. textarea {  
  485.   font-family: sans-serif;  
  486.   /* 1 */  
  487.   font-size: 100%;  
  488.   /* 1 */  
  489.   line-height: 1.15;  
  490.   /* 1 */  
  491.   margin: 0;  
  492.   /* 2 */  
  493. }  
  494.   
  495. button,  
  496. input {  
  497.   /* 1 */  
  498.   overflow: visible;  
  499. }  
  500.   
  501. button,  
  502. select {  
  503.   /* 1 */  
  504.   text-transform: none;  
  505. }  
  506.   
  507. button,  
  508. html [type="button"],  
  509.   
  510. /* 1 */  
  511.   
  512. [type="reset"],  
  513. [type="submit"] {  
  514.   -webkit-appearance: button;  
  515.   /* 2 */  
  516. }  
  517.   
  518. button::-moz-focus-inner,  
  519. [type="button"]::-moz-focus-inner,  
  520. [type="reset"]::-moz-focus-inner,  
  521. [type="submit"]::-moz-focus-inner {  
  522.   border-style: none;  
  523.   padding: 0;  
  524. }  
  525.   
  526. button:-moz-focusring,  
  527. [type="button"]:-moz-focusring,  
  528. [type="reset"]:-moz-focusring,  
  529. [type="submit"]:-moz-focusring {  
  530.   outline: 1px dotted ButtonText;  
  531. }  
  532.   
  533. fieldset {  
  534.   padding: 0.35em 0.75em 0.625em;  
  535. }  
  536.   
  537. legend {  
  538.   box-sizing: border-box;  
  539.   /* 1 */  
  540.   color: inherit;  
  541.   /* 2 */  
  542.   display: table;  
  543.   /* 1 */  
  544.   max-width: 100%;  
  545.   /* 1 */  
  546.   padding: 0;  
  547.   /* 3 */  
  548.   white-space: normal;  
  549.   /* 1 */  
  550. }  
  551.   
  552. progress {  
  553.   display: inline-block;  
  554.   /* 1 */  
  555.   vertical-align: baseline;  
  556.   /* 2 */  
  557. }  
  558.   
  559. textarea {  
  560.   overflow: auto;  
  561. }  
  562.   
  563. [type="checkbox"],  
  564. [type="radio"] {  
  565.   box-sizing: border-box;  
  566.   /* 1 */  
  567.   padding: 0;  
  568.   /* 2 */  
  569. }  
  570.   
  571. [type="number"]::-webkit-inner-spin-button,  
  572. [type="number"]::-webkit-outer-spin-button {  
  573.   height: auto;  
  574. }  
  575.   
  576. [type="search"] {  
  577.   -webkit-appearance: textfield;  
  578.   /* 1 */  
  579.   outline-offset: -2px;  
  580.   /* 2 */  
  581. }  
  582.   
  583. [type="search"]::-webkit-search-cancel-button,  
  584. [type="search"]::-webkit-search-decoration {  
  585.   -webkit-appearance: none;  
  586. }  
  587.   
  588.  ::-webkit-file-upload-button {  
  589.   -webkit-appearance: button;  
  590.   /* 1 */  
  591.   font: inherit;  
  592.   /* 2 */  
  593. }  
  594.   
  595. details,  
  596.   
  597. /* 1 */  
  598.   
  599. menu {  
  600.   display: block;  
  601. }  
  602.   
  603. summary {  
  604.   display: list-item;  
  605. }  
  606.   
  607. canvas {  
  608.   display: inline-block;  
  609. }  
  610.   
  611. template {  
  612.   display: none;  
  613. }  
  614.   
  615. [hidden] {  
  616.   display: none;  
  617. }  
  618.   
  619. /* reset */  
  620.   
  621. html,  
  622. body,  
  623. h1,  
  624. h2,  
  625. h3,  
  626. h4,  
  627. h5,  
  628. h6,  
  629. div,  
  630. dl,  
  631. dt,  
  632. dd,  
  633. ul,  
  634. ol,  
  635. li,  
  636. p,  
  637. blockquote,  
  638. pre,  
  639. hr,  
  640. figure,  
  641. table,  
  642. caption,  
  643. th,  
  644. td,  
  645. form,  
  646. fieldset,  
  647. legend,  
  648. input,  
  649. button,  
  650. textarea,  
  651. menu {  
  652.   margin: 0;  
  653.   padding: 0;  
  654.   box-sizing: border-box;  
  655. }  
  656.   
  657. html,  
  658. body {  
  659.   /* 禁止选中文本 */  
  660.   -webkit-user-select: none;  
  661.   user-select: none;  
  662.   font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif  
  663. }  
  664.   
  665. /* 禁止长按链接与图片弹出菜单 */  
  666.   
  667. a,  
  668. img {  
  669.   -webkit-touch-callout: none;  
  670. }  
  671.   
  672. /*ios android去除自带阴影的样式*/  
  673.   
  674. a,  
  675. input {  
  676.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  677. }  
  678.   
  679. input[type="text"] {  
  680.   -webkit-appearance: none;  
  681. }  

3. 公共样式提取

  1. /* 禁止选中文本 */ 
  2. .usn{ 
  3.     -webkit-user-select:none; 
  4.     -moz-user-select:none; 
  5.     -ms-user-select:none; 
  6.     -o-user-select:none; 
  7.     user-select:none; 
  8. } 
  9. /* 浮动 */ 
  10. .fl { float: left; } 
  11. .fr { float: right; } 
  12. .cf { zoom: 1; } 
  13. .cf:after { 
  14.     content:"."; 
  15.     display:block; 
  16.     clear:both; 
  17.     visibility:hidden; 
  18.     height:0; 
  19.     overflow:hidden; 
  20. } 
  21.  
  22. /* 元素类型 */ 
  23. .db { display: block; } 
  24. .dn { display: none; } 
  25. .di { display: inline } 
  26. .dib {display: inline-block;} 
  27. .transparent { opacity: 0 } 
  28.  
  29. /*文字排版、颜色*/ 
  30. .f12 { font-size:12px } 
  31. .f14 { font-size:14px } 
  32. .f16 { font-size:16px } 
  33. .f18 { font-size:18px } 
  34. .f20 { font-size:20px } 
  35. .fb { font-weight:bold } 
  36. .fn { font-weight:normal } 
  37. .t2 { text-indent:2em } 
  38. .red,a.red { color:#cc0031 } 
  39. .darkblue,a.darkblue { color:#039 } 
  40. .gray,a.gray { color:#878787 } 
  41. .lh150 { line-height:150% } 
  42. .lh180 { line-height:180% } 
  43. .lh200 { line-height:200% } 
  44. .unl { text-decoration:underline; } 
  45. .no_unl { text-decoration:none; } 
  46. .tl { text-align: left; } 
  47. .tc { text-align: center; } 
  48. .tr { text-align: right; } 
  49. .tj { text-align: justify; text-justify: inter-ideograph; } 
  50. .wn { /* 强制不换行 */ 
  51.     word-wrap:normal; 
  52.     white-space:nowrap; 
  53. } 
  54. .wb { /* 强制换行 */ 
  55.     white-space:normal; 
  56.     word-wrap:break-word; 
  57.     word-break:break-all; 
  58. } 
  59. .wp { /* 保持空白序列*/ 
  60.     overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all; 
  61. } 
  62. .wes { /* 多出部分用省略号表示 , 用于一行 */ 
  63.     overflow:hidden; 
  64.     word-wrap:normal; 
  65.     white-space:nowrap; 
  66.     text-overflow:ellipsis; 
  67. } 
  68. .wes-2 { /* 适用于webkit内核和移动端 */ 
  69.     display: -webkit-box; 
  70.     -webkit-box-orient: vertical; 
  71.     -webkit-line-clamp: 2; 
  72.     overflow: hidden; 
  73. }  
  74. .wes-3 { 
  75.     display: -webkit-box; 
  76.     -webkit-box-orient: vertical; 
  77.     -webkit-line-clamp: 3; 
  78.     overflow: hidden; 
  79. } 
  80. .wes-4 { 
  81.     display: -webkit-box; 
  82.     -webkit-box-orient: vertical; 
  83.     -webkit-line-clamp: 4; 
  84.     overflow: hidden; 
  85. } 
  86.  
  87. /* 溢出样式 */ 
  88. .ofh { overflow: hidden; } 
  89. .ofs {overflow: scroll; } 
  90. .ofa {overflow: auto; } 
  91. .ofv {overflow: visible; } 
  92.  
  93. /* 定位方式 */ 
  94. .ps {position: static; } 
  95. .pr {position: relative;zoom:1; } 
  96. .pa {position: absolute; } 
  97. .pf {position: fixed; } 
  98.  
  99. /* 垂直对齐方式 */ 
  100. .vt {vertical-align: top; } 
  101. .vm {vertical-align: middle; } 
  102. .vb {vertical-align: bottom; } 
  103.  
  104. /* 鼠标样式 */ 
  105. .csd {cursor: default; } 
  106. .csp {cursor: pointer; } 
  107. .csh {cursor: help; } 
  108. .csm {cursor: move; } 
  109.  
  110. /* flex布局 */ 
  111. .df-sb { 
  112.     display:flex; 
  113.     align-items: center; 
  114.     justify-content: space-between; 
  115. } 
  116. .df-sa { 
  117.     display:flex; 
  118.     align-items: center; 
  119.     justify-content: space-around; 
  120. } 
  121.  
  122. /* 垂直居中 */ 
  123. .df-c { 
  124.     display: flex; 
  125.     align-items: center; 
  126.     justify-content: center; 
  127. } 
  128. .tb-c { 
  129.     text-align:center; 
  130.     display:table-cell; 
  131.     vertical-align:middle; 
  132. } 
  133. .ts-c { 
  134.     position: absolute; 
  135.     left: 50%; top: 50%; 
  136.     transform: translate(-50%, -50%); 
  137. } 
  138. .ts-mc { 
  139.     position: absolute; 
  140.     left: 0;right: 0; 
  141.     bottom: 0; top: 0; 
  142.     margin: auto; 
  143. } 
  144.  
  145. /* 辅助 */ 
  146. .mask-fixed-wrapper { 
  147.     width: 100%; 
  148.     height: 100%; 
  149.     position: fixed; 
  150.     left:0;top:0; 
  151.     background: rgba(0, 0, 0, 0.65); 
  152.     z-index: 999; 
  153. } 
  154. .bg-cover { 
  155.     background-size: cover; 
  156.     background-repeat: no-repeat; 
  157.     background-position: center center; 
  158. } 
  159. .bg-cover-all { 
  160.     background-size: 100% 100%; 
  161.     background-repeat: no-repeat; 
  162.     background-position: center center; 
  163. } 

责任编辑：张燕妮 来源： segmentfault
JavaScript CSS 工具
相关推荐
JavaScript常用工具方法封装
因为工作中经常用到这些方法，所有便把这些方法进行了总结。

2019-02-13 14:58:43

cssjavascript前端
Javascript总结（常用工具类的封装）
因为工作中经常用到这些方法，所有便把这些方法进行了总结，希望对大家有所帮助。

2018-01-30 18:49:16

前端JavascriptCSS
JavaScript开发常用工具函数
本文总结了48个JS开发常用工具函数，快来看看都有哪些，一定对你有所帮助！

2019-07-08 15:10:17

JS工具函数
推荐15个Javascript常用工具类
今天给大家分享15个Javascript常用工具类，希望大家喜欢。

2022-12-05 14:39:33

Javascript工具
MySQL常用工具选择和建议
技术规划的时候，会发现有一些事情需要前置，比如说MySQL里面的工具，如果等到实际碰到了各色的问题再来统一，就比较难了。有沟通成本，人力成本，技术沉淀和持续交付等等的成本，这些最好提前和团队有一个基本的沟通，达成一个共识。内部统一了以后，和开发同学规范统一就有了一个基线。

2019-03-25 19:13:37

MySQL常用工具数据库
Postfix的常用工具
Postfix是WietseVenema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件。那如何更快更好的运用Postfix呢，本文为大家介绍十一种常用的Postfix工具，请看下文。

2011-02-21 12:44:05

Postfix
UML常用工具大全
在学习UML建模语言的过程中，经常会用到UML工具，对UML常用工具你是否熟悉，这里就向大家简单介绍一下，希望通过本文的学习，你对UML常用工具有全面的认识。

2010-06-12 13:59:12

c++编程常用工具
所谓“工欲善其事，必先利其器”，从程序员的角度来讲，好工具的使用总会给人带来事半功倍的效果。本文是笔者总结的c++编程常用工具，拿出来与大家分享一下。

2011-04-08 17:24:05

c++工具编程
Linux 常用工具综合列表简述
Linux的内核主要使用C语言编写而成，少量地使用了汇编语言，其编译器采用gcc。因此C语言是Linux系统中相当重要的编程语言。

2010-06-04 17:56:22

Linux 常用工具
Linux 常用工具大全介绍指南
Linux的内核主要使用C语言编写而成，少量地使用了汇编语言，其编译器采用gcc。因此C语言是Linux系统中相当重要的编程语言。

2010-06-13 15:35:01

Android 常用工具类源码大全
主要介绍总结的Android开发中常用的工具类，大部分同样适用于Java。目前包括HttpUtils、DownloadManagerPro、ShellUtils、PackageUtils、PreferencesUtils、JSONUtils、FileUtils、ResourceUtils、StringUtils、ParcelUtils、RandomUtils、ArrayUtils、ImageUtils、ListUtils、MapUtils、ObjectUtils、SerializeUtils、SystemUtils、TimeUtils。TheEnglish...

2014-10-21 15:11:29

Android工具类源码
Web常用开发工具有哪些？常用工具推荐
Web常用开发工具有哪些？常用工具推荐，IT程序员为了快速、高效地完成任务，会使用一些Web开发具来辅助完成工作，这些工具有代码高亮显示、语法提示等便捷功能的前端开发工具，对于开发者非常友好。

2021-02-05 23:23:55

Web开发工具
解析三大UML常用工具使用
你对UML常用工具是否了解，本文就向大家简单介绍一下三大UML常用工具，希望通过国本文的学习你对UML常用工丰盈集约的熟识。

2010-07-08 13:17:19

Hadoop开发中常用工具用法解析
Hadoop相信大家有所了解，那么你对Hadoop开发是否熟悉，这里就向大家介绍一下Hadoop开发常用的一些工具，希望通过本文的介绍，大家对Hadoop开发开发有更深入的认识。

2010-06-04 14:00:32

Hadoop开发
Java数组操作的常用工具类
Java提供了的Arrays类里包含了一些static修饰方法可以直接操作数组，这个Arrays类里包含了提供了如下几个static修饰的方法（static修饰的方法可以直接通过类名调用），本文为您出了Java数组操作的常用工具类。

2009-01-04 11:55:09

Java数组Java常用工具Java类
推荐几款iOS开发常用工具
本文摘自郭历成博客，作者向大家推荐几了款iOS开发常用的工具，都是作者自己平时常用到的，希望能对各位有所帮助。

2014-04-09 10:51:56

iOS开发常用工具
C# http分析常用工具浅析
Chttp分析常用工具主要向你介绍了基于http的架构分析常用工具的基本情况，那么希望对你了解和学习Chttp分析常用工具有所帮助。

2009-09-07 10:34:47

Oracle exp的常用工具有哪些
我们今天主要向大家介绍的是数据导出常用工具OracleEXP的介绍，以及包括导出所包括表的三种模式的介绍，以下就是文章的具体内容介绍。

2010-04-29 10:22:11

Oracle exp
SQL Server性能调优方法论与常用工具
说起“调优”，可能会让很多技术人员心头激情澎湃，也可能会让很多人感觉苦恼。SQLServer的性能调优，是个很宽广的话题。本文简要介绍一个SQLServer性能调优方法论，并为大家介绍几款常用工具。

2015-06-17 10:34:15

SQL Server性能调优
为大家分享SEO几款常用工具
做搜索引擎优化的一个瓶颈是SEO的自动化，到目前为止优化网站绝大部分还是人工去做。本文为你分享几款SEO工具，一起来看。

2011-06-10 16:07:47

SEO
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服