|
|
51CTO旗下网站
|
|
移动端

JavaScript 和 CSS 常用工具方法封装

因为工作中经常用到这些JavaScript 和 CSS 常用工具方法,所有便把这些方法进行了总结。

作者:周小肆来源:segmentfault|2019-03-14 15:40

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

JavaScript

1. type 类型判断

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

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

3. Array

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

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

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

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.  * @param  {url} 
  70.  * @param  {setting} 
  71.  * @return {Promise} 
  72.  */ 
  73. fetch(url, setting) { 
  74.     //设置参数的初始值 
  75.     let opts={ 
  76.         method: (setting.method || 'GET').toUpperCase(), //请求方式 
  77.         headers : setting.headers  || {}, // 请求头设置 
  78.         credentials : setting.credentials  || true// 设置cookie是否一起发送 
  79.         body: setting.body || {}, 
  80.         mode : setting.mode  || 'no-cors'// 可以设置 cors, no-cors, same-origin 
  81.         redirect : setting.redirect  || 'follow'// follow, error, manual 
  82.         cache : setting.cache  || 'default' // 设置 cache 模式 (default, reload, no-cache) 
  83.     } 
  84.     let dataType = setting.dataType || "json"// 解析方式   
  85.         data = setting.data || "" // 参数 
  86.  
  87.     // 参数格式化 
  88.     function params_format (obj) { 
  89.         var str = '' 
  90.         for (var i in obj) { 
  91.             str += `${i}=${obj[i]}&` 
  92.         } 
  93.         return str.split('').slice(0, -1).join(''
  94.     } 
  95.  
  96.     if (opts.method === 'GET') { 
  97.         url = url + (data?`?${params_format(data)}`:''
  98.     }else
  99.         setting.body = data || {} 
  100.     } 
  101.  
  102.     return new Promise( (resolve, reject) => { 
  103.         fetch(url, opts).then( async res => { 
  104.             let data = dataType === 'text' ? await res.text() : 
  105.                 dataType === 'blob' ? await res.blob() : await res.json()  
  106.             resolve(data) 
  107.         }).catch( e => { 
  108.             reject(e) 
  109.         }) 
  110.     }) 
  111.  

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. addClass (ele, name) { 
  21.     if (!this.hasClass(ele, name)) ele.className += " " + name; 
  22.  
  23. /*删除类名*/ 
  24. removeClass (ele, name) { 
  25.     if (this.hasClass(ele, name)) { 
  26.         var reg = new RegExp('(\\s|^)' + name + '(\\s|$)'); 
  27.         ele.className = ele.className.replace(reg, ''); 
  28.     } 
  29.  
  30. /*替换类名*/ 
  31. replaceClass (ele, newName, oldName) { 
  32.     this.removeClass(ele, oldName); 
  33.     this.addClass(ele, newName); 
  34.  
  35. /*获取兄弟节点*/ 
  36. siblings (ele) { 
  37.     console.log(ele.parentNode) 
  38.     var chid = ele.parentNode.children,eleMatch = [];  
  39.     for(var i = 0, len = chid.length; i < len; i ++){  
  40.         if(chid[i] != ele){  
  41.             eleMatch.push(chid[i]);  
  42.         }  
  43.     }  
  44.     return eleMatch; 
  45.  
  46. /*获取行间样式属性*/ 
  47. getByStyle (obj,name){ 
  48.     if(obj.currentStyle){ 
  49.         return  obj.currentStyle[name]; 
  50.     }else
  51.         return  getComputedStyle(obj,false)[name]; 
  52.     } 

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.  

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

CSS

1. pc-reset PC样式初始化

  1. /* normalize.css */  
  2.   
  3. html {  
  4.   line-height1.15;  
  5.   /* 1 */  
  6.   -ms-text-size-adjust: 100%;  
  7.   /* 2 */  
  8.   -webkit-text-size-adjust: 100%;  
  9.   /* 2 */  
  10. }  
  11.   
  12. body {  
  13.   margin0;  
  14. }  
  15.   
  16. article,  
  17. aside,  
  18. footer,  
  19. header,  
  20. nav,  
  21. section {  
  22.   displayblock;  
  23. }  
  24.   
  25. h1 {  
  26.   font-size2em;  
  27.   margin0.67em 0;  
  28. }  
  29.   
  30. figcaption,  
  31. figure,  
  32. main {  
  33.   /* 1 */  
  34.   displayblock;  
  35. }  
  36.   
  37. figure {  
  38.   margin1em 40px;  
  39. }  
  40.   
  41. hr {  
  42.   box-sizing: content-box;  
  43.   /* 1 */  
  44.   height0;  
  45.   /* 1 */  
  46.   overflowvisible;  
  47.   /* 2 */  
  48. }  
  49.   
  50. pre {  
  51.   font-familymonospacemonospace;  
  52.   /* 1 */  
  53.   font-size1em;  
  54.   /* 2 */  
  55. }  
  56.   
  57. a {  
  58.   background-colortransparent;  
  59.   /* 1 */  
  60.   -webkit-text-decoration-skip: objects;  
  61.   /* 2 */  
  62. }  
  63.   
  64. abbr[title] {  
  65.   border-bottomnone;  
  66.   /* 1 */  
  67.   text-decorationunderline;  
  68.   /* 2 */  
  69.   text-decorationunderline dotted;  
  70.   /* 2 */  
  71. }  
  72.   
  73. b,  
  74. strong {  
  75.   font-weight: inherit;  
  76. }  
  77.   
  78. b,  
  79. strong {  
  80.   font-weightbolder;  
  81. }  
  82.   
  83. code,  
  84. kbd,  
  85. samp {  
  86.   font-familymonospacemonospace;  
  87.   /* 1 */  
  88.   font-size1em;  
  89.   /* 2 */  
  90. }  
  91.   
  92. dfn {  
  93.   font-styleitalic;  
  94. }  
  95.   
  96. mark {  
  97.   background-color#ff0;  
  98.   color#000;  
  99. }  
  100.   
  101. small {  
  102.   font-size80%;  
  103. }  
  104.   
  105. sub,  
  106. sup {  
  107.   font-size75%;  
  108.   line-height0;  
  109.   positionrelative;  
  110.   vertical-alignbaseline;  
  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.   displaynone;  
  128.   height0;  
  129. }  
  130.   
  131. img {  
  132.   border-stylenone;  
  133. }  
  134.   
  135. svg:not(:root) {  
  136.   overflowhidden;  
  137. }  
  138.   
  139. button,  
  140. input,  
  141. optgroup,  
  142. select,  
  143. textarea {  
  144.   font-familysans-serif;  
  145.   /* 1 */  
  146.   font-size100%;  
  147.   /* 1 */  
  148.   line-height1.15;  
  149.   /* 1 */  
  150.   margin0;  
  151.   /* 2 */  
  152. }  
  153.   
  154. button,  
  155. input {  
  156.   /* 1 */  
  157.   overflowvisible;  
  158. }  
  159.   
  160. button,  
  161. select {  
  162.   /* 1 */  
  163.   text-transformnone;  
  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-stylenone;  
  182.   padding0;  
  183. }  
  184.   
  185. button:-moz-focusring,  
  186. [type="button"]:-moz-focusring,  
  187. [type="reset"]:-moz-focusring,  
  188. [type="submit"]:-moz-focusring {  
  189.   outline1px dotted ButtonText;  
  190. }  
  191.   
  192. fieldset {  
  193.   padding0.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-width100%;  
  204.   /* 1 */  
  205.   padding0;  
  206.   /* 3 */  
  207.   white-spacenormal;  
  208.   /* 1 */  
  209. }  
  210.   
  211. progress {  
  212.   display: inline-block;  
  213.   /* 1 */  
  214.   vertical-alignbaseline;  
  215.   /* 2 */  
  216. }  
  217.   
  218. textarea {  
  219.   overflowauto;  
  220. }  
  221.   
  222. [type="checkbox"],  
  223. [type="radio"] {  
  224.   box-sizing: border-box;  
  225.   /* 1 */  
  226.   padding0;  
  227.   /* 2 */  
  228. }  
  229.   
  230. [type="number"]::-webkit-inner-spin-button,  
  231. [type="number"]::-webkit-outer-spin-button {  
  232.   heightauto;  
  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.   displayblock;  
  260. }  
  261.   
  262. summary {  
  263.   displaylist-item;  
  264. }  
  265.   
  266. canvas {  
  267.   display: inline-block;  
  268. }  
  269.   
  270. template {  
  271.   displaynone;  
  272. }  
  273.   
  274. [hidden] {  
  275.   displaynone;  
  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.   margin0;  
  312.   padding0;  
  313.   box-sizing: border-box;  
  314. }  

2. Phone-reset

  1. /* normalize.css */  
  2.   
  3. html {  
  4.   line-height1.15;  
  5.   /* 1 */  
  6.   -ms-text-size-adjust: 100%;  
  7.   /* 2 */  
  8.   -webkit-text-size-adjust: 100%;  
  9.   /* 2 */  
  10. }  
  11.   
  12. body {  
  13.   margin0;  
  14. }  
  15.   
  16. article,  
  17. aside,  
  18. footer,  
  19. header,  
  20. nav,  
  21. section {  
  22.   displayblock;  
  23. }  
  24.   
  25. h1 {  
  26.   font-size2em;  
  27.   margin0.67em 0;  
  28. }  
  29.   
  30. figcaption,  
  31. figure,  
  32. main {  
  33.   /* 1 */  
  34.   displayblock;  
  35. }  
  36.   
  37. figure {  
  38.   margin1em 40px;  
  39. }  
  40.   
  41. hr {  
  42.   box-sizing: content-box;  
  43.   /* 1 */  
  44.   height0;  
  45.   /* 1 */  
  46.   overflowvisible;  
  47.   /* 2 */  
  48. }  
  49.   
  50. pre {  
  51.   font-familymonospacemonospace;  
  52.   /* 1 */  
  53.   font-size1em;  
  54.   /* 2 */  
  55. }  
  56.   
  57. a {  
  58.   background-colortransparent;  
  59.   /* 1 */  
  60.   -webkit-text-decoration-skip: objects;  
  61.   /* 2 */  
  62. }  
  63.   
  64. abbr[title] {  
  65.   border-bottomnone;  
  66.   /* 1 */  
  67.   text-decorationunderline;  
  68.   /* 2 */  
  69.   text-decorationunderline dotted;  
  70.   /* 2 */  
  71. }  
  72.   
  73. b,  
  74. strong {  
  75.   font-weight: inherit;  
  76. }  
  77.   
  78. b,  
  79. strong {  
  80.   font-weightbolder;  
  81. }  
  82.   
  83. code,  
  84. kbd,  
  85. samp {  
  86.   font-familymonospacemonospace;  
  87.   /* 1 */  
  88.   font-size1em;  
  89.   /* 2 */  
  90. }  
  91.   
  92. dfn {  
  93.   font-styleitalic;  
  94. }  
  95.   
  96. mark {  
  97.   background-color#ff0;  
  98.   color#000;  
  99. }  
  100.   
  101. small {  
  102.   font-size80%;  
  103. }  
  104.   
  105. sub,  
  106. sup {  
  107.   font-size75%;  
  108.   line-height0;  
  109.   positionrelative;  
  110.   vertical-alignbaseline;  
  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.   displaynone;  
  128.   height0;  
  129. }  
  130.   
  131. img {  
  132.   border-stylenone;  
  133. }  
  134.   
  135. svg:not(:root) {  
  136.   overflowhidden;  
  137. }  
  138.   
  139. button,  
  140. input,  
  141. optgroup,  
  142. select,  
  143. textarea {  
  144.   font-familysans-serif;  
  145.   /* 1 */  
  146.   font-size100%;  
  147.   /* 1 */  
  148.   line-height1.15;  
  149.   /* 1 */  
  150.   margin0;  
  151.   /* 2 */  
  152. }  
  153.   
  154. button,  
  155. input {  
  156.   /* 1 */  
  157.   overflowvisible;  
  158. }  
  159.   
  160. button,  
  161. select {  
  162.   /* 1 */  
  163.   text-transformnone;  
  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-stylenone;  
  182.   padding0;  
  183. }  
  184.   
  185. button:-moz-focusring,  
  186. [type="button"]:-moz-focusring,  
  187. [type="reset"]:-moz-focusring,  
  188. [type="submit"]:-moz-focusring {  
  189.   outline1px dotted ButtonText;  
  190. }  
  191.   
  192. fieldset {  
  193.   padding0.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-width100%;  
  204.   /* 1 */  
  205.   padding0;  
  206.   /* 3 */  
  207.   white-spacenormal;  
  208.   /* 1 */  
  209. }  
  210.   
  211. progress {  
  212.   display: inline-block;  
  213.   /* 1 */  
  214.   vertical-alignbaseline;  
  215.   /* 2 */  
  216. }  
  217.   
  218. textarea {  
  219.   overflowauto;  
  220. }  
  221.   
  222. [type="checkbox"],  
  223. [type="radio"] {  
  224.   box-sizing: border-box;  
  225.   /* 1 */  
  226.   padding0;  
  227.   /* 2 */  
  228. }  
  229.   
  230. [type="number"]::-webkit-inner-spin-button,  
  231. [type="number"]::-webkit-outer-spin-button {  
  232.   heightauto;  
  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.   displayblock;  
  260. }  
  261.   
  262. summary {  
  263.   displaylist-item;  
  264. }  
  265.   
  266. canvas {  
  267.   display: inline-block;  
  268. }  
  269.   
  270. template {  
  271.   displaynone;  
  272. }  
  273.   
  274. [hidden] {  
  275.   displaynone;  
  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.   margin0;  
  312.   padding0;  
  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'HelveticaArialsans-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(0000);  
  336. }  
  337.   
  338. input[type="text"] {  
  339.   -webkit-appearance: none;  
  340. }  
  341. 2. Phone-reset  
  342. /* normalize.css */  
  343.   
  344. html {  
  345.   line-height1.15;  
  346.   /* 1 */  
  347.   -ms-text-size-adjust: 100%;  
  348.   /* 2 */  
  349.   -webkit-text-size-adjust: 100%;  
  350.   /* 2 */  
  351. }  
  352.   
  353. body {  
  354.   margin0;  
  355. }  
  356.   
  357. article,  
  358. aside,  
  359. footer,  
  360. header,  
  361. nav,  
  362. section {  
  363.   displayblock;  
  364. }  
  365.   
  366. h1 {  
  367.   font-size2em;  
  368.   margin0.67em 0;  
  369. }  
  370.   
  371. figcaption,  
  372. figure,  
  373. main {  
  374.   /* 1 */  
  375.   displayblock;  
  376. }  
  377.   
  378. figure {  
  379.   margin1em 40px;  
  380. }  
  381.   
  382. hr {  
  383.   box-sizing: content-box;  
  384.   /* 1 */  
  385.   height0;  
  386.   /* 1 */  
  387.   overflowvisible;  
  388.   /* 2 */  
  389. }  
  390.   
  391. pre {  
  392.   font-familymonospacemonospace;  
  393.   /* 1 */  
  394.   font-size1em;  
  395.   /* 2 */  
  396. }  
  397.   
  398. a {  
  399.   background-colortransparent;  
  400.   /* 1 */  
  401.   -webkit-text-decoration-skip: objects;  
  402.   /* 2 */  
  403. }  
  404.   
  405. abbr[title] {  
  406.   border-bottomnone;  
  407.   /* 1 */  
  408.   text-decorationunderline;  
  409.   /* 2 */  
  410.   text-decorationunderline dotted;  
  411.   /* 2 */  
  412. }  
  413.   
  414. b,  
  415. strong {  
  416.   font-weight: inherit;  
  417. }  
  418.   
  419. b,  
  420. strong {  
  421.   font-weightbolder;  
  422. }  
  423.   
  424. code,  
  425. kbd,  
  426. samp {  
  427.   font-familymonospacemonospace;  
  428.   /* 1 */  
  429.   font-size1em;  
  430.   /* 2 */  
  431. }  
  432.   
  433. dfn {  
  434.   font-styleitalic;  
  435. }  
  436.   
  437. mark {  
  438.   background-color#ff0;  
  439.   color#000;  
  440. }  
  441.   
  442. small {  
  443.   font-size80%;  
  444. }  
  445.   
  446. sub,  
  447. sup {  
  448.   font-size75%;  
  449.   line-height0;  
  450.   positionrelative;  
  451.   vertical-alignbaseline;  
  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.   displaynone;  
  469.   height0;  
  470. }  
  471.   
  472. img {  
  473.   border-stylenone;  
  474. }  
  475.   
  476. svg:not(:root) {  
  477.   overflowhidden;  
  478. }  
  479.   
  480. button,  
  481. input,  
  482. optgroup,  
  483. select,  
  484. textarea {  
  485.   font-familysans-serif;  
  486.   /* 1 */  
  487.   font-size100%;  
  488.   /* 1 */  
  489.   line-height1.15;  
  490.   /* 1 */  
  491.   margin0;  
  492.   /* 2 */  
  493. }  
  494.   
  495. button,  
  496. input {  
  497.   /* 1 */  
  498.   overflowvisible;  
  499. }  
  500.   
  501. button,  
  502. select {  
  503.   /* 1 */  
  504.   text-transformnone;  
  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-stylenone;  
  523.   padding0;  
  524. }  
  525.   
  526. button:-moz-focusring,  
  527. [type="button"]:-moz-focusring,  
  528. [type="reset"]:-moz-focusring,  
  529. [type="submit"]:-moz-focusring {  
  530.   outline1px dotted ButtonText;  
  531. }  
  532.   
  533. fieldset {  
  534.   padding0.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-width100%;  
  545.   /* 1 */  
  546.   padding0;  
  547.   /* 3 */  
  548.   white-spacenormal;  
  549.   /* 1 */  
  550. }  
  551.   
  552. progress {  
  553.   display: inline-block;  
  554.   /* 1 */  
  555.   vertical-alignbaseline;  
  556.   /* 2 */  
  557. }  
  558.   
  559. textarea {  
  560.   overflowauto;  
  561. }  
  562.   
  563. [type="checkbox"],  
  564. [type="radio"] {  
  565.   box-sizing: border-box;  
  566.   /* 1 */  
  567.   padding0;  
  568.   /* 2 */  
  569. }  
  570.   
  571. [type="number"]::-webkit-inner-spin-button,  
  572. [type="number"]::-webkit-outer-spin-button {  
  573.   heightauto;  
  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.   displayblock;  
  601. }  
  602.   
  603. summary {  
  604.   displaylist-item;  
  605. }  
  606.   
  607. canvas {  
  608.   display: inline-block;  
  609. }  
  610.   
  611. template {  
  612.   displaynone;  
  613. }  
  614.   
  615. [hidden] {  
  616.   displaynone;  
  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.   margin0;  
  653.   padding0;  
  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'HelveticaArialsans-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(0000);  
  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. .fl { floatleft; } 
  10. .fr { floatright; } 
  11. .cf { zoom: 1; } 
  12. .cf:after { 
  13.     content:"."
  14.     display:block
  15.     clear:both
  16.     visibility:hidden
  17.     height:0
  18.     overflow:hidden
  19.  
  20. /* 元素类型 */ 
  21. .db { displayblock; } 
  22. .dn { displaynone; } 
  23. .di { displayinline } 
  24. .dib {display: inline-block;} 
  25. .transparent { opacity: 0 } 
  26.  
  27. /*文字排版、颜色*/ 
  28. .f12 { font-size:12px } 
  29. .f14 { font-size:14px } 
  30. .f16 { font-size:16px } 
  31. .f18 { font-size:18px } 
  32. .f20 { font-size:20px } 
  33. .fb { font-weight:bold } 
  34. .fn { font-weight:normal } 
  35. .t2 { text-indent:2em } 
  36. .red,a.red { color:#cc0031 } 
  37. .darkblue,a.darkblue { color:#039 } 
  38. .gray,a.gray { color:#878787 } 
  39. .lh150 { line-height:150% } 
  40. .lh180 { line-height:180% } 
  41. .lh200 { line-height:200% } 
  42. .unl { text-decoration:underline; } 
  43. .no_unl { text-decoration:none; } 
  44. .tl { text-alignleft; } 
  45. .tc { text-aligncenter; } 
  46. .tr { text-alignright; } 
  47. .tj { text-alignjustify; text-justify: inter-ideograph; } 
  48. .wn { /* 强制不换行 */ 
  49.     word-wrap:normal
  50.     white-space:nowrap
  51. .wb { /* 强制换行 */ 
  52.     white-space:normal
  53.     word-wrap:break-word; 
  54.     word-break:break-all
  55. .wp { /* 保持空白序列*/ 
  56.     overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all
  57. .wes { /* 多出部分用省略号表示 , 用于一行 */ 
  58.     overflow:hidden
  59.     word-wrap:normal
  60.     white-space:nowrap
  61.     text-overflow:ellipsis; 
  62. .wes-2 { /* 适用于webkit内核和移动端 */ 
  63.     display: -webkit-box; 
  64.     -webkit-box-orient: vertical; 
  65.     -webkit-line-clamp: 2
  66.     overflowhidden
  67. }  
  68. .wes-3 { 
  69.     display: -webkit-box; 
  70.     -webkit-box-orient: vertical; 
  71.     -webkit-line-clamp: 3
  72.     overflowhidden
  73. .wes-4 { 
  74.     display: -webkit-box; 
  75.     -webkit-box-orient: vertical; 
  76.     -webkit-line-clamp: 4
  77.     overflowhidden
  78.  
  79. /* 溢出样式 */ 
  80. .ofh { overflowhidden; } 
  81. .ofs {overflowscroll; } 
  82. .ofa {overflowauto; } 
  83. .ofv {overflowvisible; } 
  84.  
  85. /* 定位方式 */ 
  86. .ps {positionstatic; } 
  87. .pr {positionrelative;zoom:1; } 
  88. .pa {positionabsolute; } 
  89. .pf {positionfixed; } 
  90.  
  91. /* 垂直对齐方式 */ 
  92. .vt {vertical-aligntop; } 
  93. .vm {vertical-alignmiddle; } 
  94. .vb {vertical-alignbottom; } 
  95.  
  96. /* 鼠标样式 */ 
  97. .csd {cursordefault; } 
  98. .csp {cursorpointer; } 
  99. .csh {cursorhelp; } 
  100. .csm {cursormove; } 
  101.  
  102. /* flex布局 */ 
  103. .df-sb { 
  104.     display:flex; 
  105.     align-items: center
  106.     justify-content: space-between; 
  107. .df-sa { 
  108.     display:flex; 
  109.     align-items: center
  110.     justify-content: space-around; 
  111.  
  112. /* 垂直居中 */ 
  113. .df-c { 
  114.     display: flex; 
  115.     align-items: center
  116.     justify-contentcenter
  117. .tb-c { 
  118.     text-align:center
  119.     display:table-cell
  120.     vertical-align:middle
  121. .ts-c { 
  122.     positionabsolute
  123.     left: 50%; top: 50%
  124.     transform: translate(-50%-50%); 
  125. .ts-mc { 
  126.     positionabsolute
  127.     left: 0;right: 0
  128.     bottom: 0; top: 0
  129.     marginauto
  130.  
  131. /* 辅助 */ 
  132. .mask-fixed-wrapper { 
  133.     width100%
  134.     height100%
  135.     positionfixed
  136.     left:0;top:0
  137.     background: rgba(0000.65); 
  138.     z-index999
  139. .bg-cover { 
  140.     background-size: cover; 
  141.     background-repeatno-repeat
  142.     background-positioncenter center
  143. .bg-cover-all { 
  144.     background-size100% 100%
  145.     background-repeatno-repeat
  146.     background-positioncenter center

【编辑推荐】

  1. 谷歌和OpenAI开发新工具,能更好地研究机器视觉算法
  2. 13岁女学生被捕:因发布JavaScript无限循环代码
  3. 让人称赞的 Java 工具包Jodd 5.0.10 发布
  4. CSS 宣布支持三角函数,下一步是什么?
  5. 推荐这几款开发流程增强工具让您事半功倍
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

Redis运维秘籍

Redis运维秘籍

运维标配技术
共15章 | one叶孤舟

39人订阅学习

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

233人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

89人订阅学习

读 书 +更多

网管第一课——计算机网络原理

本书是《网管第一课》系列图书中的第一本,是专门针对高校和培训机构编写的,其主要特点是内容细而精、针对性强。书中内容全是经过精心挑选...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客

澳门博彩官网