加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 （https://www.hxwgxz.com/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 移动互联 > 正文

JavaScript 和 CSS 常用工具方法封装

发布时间：2019-03-18 16:51:34 所属栏目：移动互联 来源：周小肆
导读：因为工作中经常用到这些方法，所有便把这些方法进行了总结。 JavaScript 1. type 类型判断 isString(o){//是否字符串 returnObject.prototype.toString.call(o).slice(8,-1)==='String' } isNumber(o){//是否数字 returnObject.prototype.toString.call(o)
副标题[/!--empirenews.page--]

JavaScript 和 CSS 常用工具方法封装

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

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 /^(0d{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(/bw+b/g, function (word) { 
  35.                 return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase(); 
  36.  
  37.             }); 
  38.         case 2: 
  39.             return str.replace(/bw+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. } 

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2008-2022 https://www.hxwgxz.com/ All Rights Reserved. 核心网