|
|
|
|
移动端

Javascript总结(常用工具类的封装)

因为工作中经常用到这些方法,所有便把这些方法进行了总结,希望对大家有所帮助。

作者:咚子来源:segmentfault|2018-01-30 18:49

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

Javascript总结(常用工具类的封装)

前言

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

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. isObj (o) { //是否对象  
  8.     return Object.prototype.toString.call(o).slice(8, -1) === 'Object'  
  9.  
  10. isArray (o) { //是否数组  
  11.     return Object.prototype.toString.call(o).slice(8, -1) === 'Array'  
  12.  
  13. isDate (o) { //是否时间  
  14.     return Object.prototype.toString.call(o).slice(8, -1) === 'Date'  
  15.  
  16. isBoolean (o) { //是否boolean  
  17.     return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'  
  18.  
  19. isFunction (o) { //是否函数  
  20.     return Object.prototype.toString.call(o).slice(8, -1) === 'Function'  
  21.  
  22. isNull (o) { //是否为null  
  23.     return Object.prototype.toString.call(o).slice(8, -1) === 'Null'  
  24.  
  25. isUndefined (o) { //是否undefined  
  26.     return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'  
  27.  
  28. isFalse (o) {  
  29.     if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN'return true 
  30.         return false  
  31.  
  32. isTrue (o) {  
  33.     return !this.isFalse(o)  
  34.  
  35. isIos () {  
  36.     var u = navigator.userAgent;  
  37.     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机  
  38.         // return "Android" 
  39.         return false  
  40.     } else if (u.indexOf('iPhone') > -1) {//苹果手机  
  41.         // return "iPhone" 
  42.         return true  
  43.     } else if (u.indexOf('iPad') > -1) {//iPad  
  44.         // return "iPad" 
  45.         return false  
  46.     } else if (u.indexOf('Windows Phone') > -1) {//winphone手机  
  47.         // return "Windows Phone" 
  48.         return false  
  49.     }else 
  50.         return false  
  51.     }  
  52.  
  53. isPC () { //是否为PC端  
  54.     var userAgentInfo = navigator.userAgent;  
  55.     var Agents = ["Android""iPhone" 
  56.                 "SymbianOS""Windows Phone" 
  57.                 "iPad""iPod"];  
  58.     var flag = true 
  59.     for (var v = 0; v < Agents.length; v++) {  
  60.         if (userAgentInfo.indexOf(Agents[v]) > 0) {  
  61.             flag = false 
  62.             break;  
  63.         }  
  64.     }  
  65.     return flag;  
  66.  
  67. browserType(){  
  68.     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
  69.     var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器  
  70.     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器  
  71.     var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器  
  72.     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器  
  73.     var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器  
  74.     var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器  
  75.     if (isIE) {  
  76.         var reIE = new RegExp("MSIE (\\d+\\.\\d+);");  
  77.         reIE.test(userAgent);  
  78.         var fIEVersion = parseFloat(RegExp["$1"]);  
  79.         if(fIEVersion == 7) return "IE7"  
  80.         else if(fIEVersion == 8) return "IE8" 
  81.         else if(fIEVersion == 9) return "IE9" 
  82.         else if(fIEVersion == 10) return "IE10" 
  83.         else if(fIEVersion == 11) return "IE11" 
  84.         else return "IE7以下"//IE版本过低  
  85.     } 
  86.  
  87.     if (isFF) return "FF" 
  88.     if (isOpera) return "Opera" 
  89.     if (isEdge) return "Edge" 
  90.     if (isSafari) return "Safari" 
  91.     if (isChrome) return "Chrome" 
  92.  
  93. checkStr (str, type) {  
  94.     switch (type) {  
  95.         case 'phone':   //手机号码  
  96.             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);  
  97.         case 'tel':     //座机  
  98.             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);  
  99.         case 'card':    //身份证  
  100.             return /^\d{15}|\d{18}$/.test(str);  
  101.         case 'pwd':     //密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线  
  102.             return /^[a-zA-Z]\w{5,17}$/.test(str)  
  103.         case 'postal':  //邮政编码  
  104.             return /[1-9]\d{5}(?!\d)/.test(str);  
  105.         case 'QQ':      //QQ号  
  106.             return /^[1-9][0-9]{4,9}$/.test(str); 
  107.         case 'email':   //邮箱  
  108.             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);  
  109.         case 'money':   //金额(小数点2位)  
  110.             return /^\d*(?:\.\d{0,2})?$/.test(str);  
  111.         case 'URL':     //网址  
  112.             return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)  
  113.         case 'IP':      //IP  
  114.             return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);  
  115.         case 'date':    //日期时间  
  116.             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)  
  117.         case 'number':  //数字  
  118.             return /^[0-9]$/.test(str);  
  119.         case 'english': //英文  
  120.             return /^[a-zA-Z]+$/.test(str);  
  121.         case 'chinese': //中文  
  122.             return /^[\u4E00-\u9FA5]+$/.test(str);  
  123.         case 'lower':   //小写  
  124.             return /^[a-z]+$/.test(str);  
  125.         case 'upper':   //大写  
  126.             return /^[A-Z]+$/.test(str);  
  127.         case 'HTML':    //HTML标记  
  128.             return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);  
  129.         default 
  130.             return true 
  131.     }  

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.  
  33.     var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {  
  34.         var value = formatObj[key 
  35.         if (key === 'a'return ['一''二''三''四''五''六''日'][value - 1]  
  36.         if (result.length > 0 && value < 10) {  
  37.             value = '0' + value  
  38.         } 
  39.          return value || 0  
  40.     })  
  41.     return time_str  
  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.  
  54. getMonths(time, len, direction) {  
  55.     var mm = new Date(time).getMonth(),  
  56.         yy = new Date(time).getFullYear(),  
  57.         direction = isNaN(direction) ? 3 : direction,  
  58.         index = mm;  
  59.     var cutMonth = function(index) {  
  60.         if ( index <= len && index >= -len) {  
  61.             return direction === 1 ? formatPre(index).concat(cutMonth(++index)):  
  62.                 direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))  
  63.         }  
  64.         return []  
  65.     }  
  66.     var formatNext = function(i) {  
  67.         var y = Math.floor(i/12), 
  68.             m = i%12  
  69.         return [yy+y + '-' + (m+1)]  
  70.     } 
  71.  
  72.     var formatPre = function(i) {  
  73.         var y = Math.ceil(i/12),  
  74.             m = i%12  
  75.         m = m===0 ? 12 : m  
  76.         return [yy-y + '-' + (13 - m)]  
  77.     }  
  78.     var formatCurr = function(i) {  
  79.         var y = Math.floor(i/12),  
  80.             yNext = Math.ceil(i/12),  
  81.             m = i%12,  
  82.             mNext = m===0 ? 12 : m  
  83.         return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)]  
  84.     } 
  85.     // 数组去重  
  86.     var unique = function(arr) {  
  87.         if ( Array.hasOwnProperty('from') ) {  
  88.             return Array.from(new Set(arr));  
  89.         }else 
  90.             var n = {},r=[];   
  91.             for(var i = 0; i < arr.length; i++){  
  92.                 if (!n[arr[i]]){  
  93.                     n[arr[i]] = true;   
  94.                     r.push(arr[i]);  
  95.                 }  
  96.             }  
  97.             return r;  
  98.         }  
  99.     }  
  100.     return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){  
  101.         return new Date(t1).getTime() - new Date(t2).getTime()  
  102.     }))  
  103.  
  104.  
  105. /**  
  106.  * 返回指定长度的天数集合  
  107.  *   
  108.  * @param  {time} 时间 
  109.  * @param  {len} 长度  
  110.  * @param  {direction} 方向: 1: 前几天;  2: 后几天;  3:前后几天  默认 3  
  111.  * @return {Array} 数组  
  112.  *  
  113.  * @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" 
  114.  */  
  115. getDays(time, len, diretion) {  
  116.     var tt = new Date(time 
  117.     var getDay = function(day) {  
  118.         var t = new Date(time 
  119.         t.setDate(t.getDate() + day 
  120.         var m = t.getMonth()+1  
  121.         return t.getFullYear()+'-'+m+'-'+t.getDate()  
  122.     }  
  123.     var arr = []  
  124.     if (diretion === 1) {  
  125.         for (var i = 1; i <= len; i++) {  
  126.             arr.unshift(getDay(-i))  
  127.         }  
  128.     }else if(diretion === 2) {  
  129.         for (var i = 1; i <= len; i++) {  
  130.             arr.push(getDay(i))  
  131.         } 
  132.      }else {  
  133.         for (var i = 1; i <= len; i++) {  
  134.             arr.unshift(getDay(-i))  
  135.         }  
  136.         arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())  
  137.         for (var i = 1; i <= len; i++) {  
  138.             arr.push(getDay(i))  
  139.         }  
  140.     }  
  141.     return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :  
  142.         diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr  
  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 ? 29 : 28  
  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. getYearOfDay (time) {  
  182.     var firstDayYear = this.getFirstDayOfYear(time);  
  183.     var lastDayYear = this.getLastDayOfYear(time);  
  184.     var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000;  
  185.     return Math.ceil(numSecond/(24*3600));  
  186. /*获取某年的第一天*/  
  187. getFirstDayOfYear (time) {  
  188.     var year = new Date(time).getFullYear();  
  189.     return year + "-01-01 00:00:00" 
  190.   
  191.  
  192. /*获取某年最后一天*/  
  193. getLastDayOfYear (time) {  
  194.     var year = new Date(time).getFullYear();  
  195.     var dateString = year + "-12-01 00:00:00" 
  196.     var endDay = this.getMonthOfDay(dateString); 
  197.     return year + "-12-" + endDay + " 23:59:59" 
  198.  
  199. /*获取某个日期是当年中的第几天*/  
  200. getDayOfYear (time) {  
  201.     var firstDayYear = this.getFirstDayOfYear(time); 
  202.     var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;  
  203.     return Math.ceil(numSecond/(24*3600));  
  204.  
  205.  
  206. /*获取某个日期在这一年的第几周*/  
  207. getDayOfYearWeek (time) {  
  208.     var numdays = this.getDayOfYear(time);  
  209.     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. /**  
  21.  * @param  {arr} 数组  
  22.  * @param  {fn} 回调函数  
  23.  * @param  {thisObj} this指向  
  24.  * @return {Array}   
  25.  */  
  26. map (arr, fn, thisObj) {  
  27.     var scope = thisObj || window;  
  28.     var a = [];  
  29.     for(var i = 0, j = arr.length; i < j; ++i) {  
  30.         var res = fn.call(scope, arr[i], i, this);  
  31.         if(res != null) a.push(res);  
  32.     }  
  33.     return a;  
  34.  
  35. /**  
  36.  * @param  {arr} 数组  
  37.  * @param  {type} 1:从小到大   2:从大到小   3:随机  
  38.  * @return {Array}  
  39.  */  
  40. sort (arr, type = 1) {  
  41.     return arr.sort( (a, b) => {  
  42.         switch(type) {  
  43.             case 1:  
  44.                 return a - b;  
  45.             case 2:  
  46.                 return b - a;  
  47.             case 3:  
  48.                 return Math.random() - 0.5;  
  49.             default 
  50.                 return arr;  
  51.         }  
  52.     })  
  53.   
  54.  
  55. /*去重*/  
  56. unique (arr) { 
  57.     if ( Array.hasOwnProperty('from') ) {  
  58.         return Array.from(new Set(arr));  
  59.     }else 
  60.         var n = {},r=[];   
  61.         for(var i = 0; i < arr.length; i++){  
  62.             if (!n[arr[i]]){  
  63.                 n[arr[i]] = true;   
  64.                 r.push(arr[i]);  
  65.             }  
  66.         }  
  67.         return r;  
  68.     }  
  69.  
  70.  
  71. /*求两个集合的并集*/  
  72. union (a, b) {  
  73.     var newArr = a.concat(b);  
  74.     return this.unique(newArr);  
  75.  
  76.  
  77. /*求两个集合的交集*/  
  78. intersect (a, b) {  
  79.     var _this = this;  
  80.     a = this.unique(a);  
  81.     return this.map(a, function(o) {  
  82.         return _this.contains(b, o) ? o : null 
  83.     });  
  84.  
  85. /*删除其中一个元素*/  
  86. remove (arr, ele) {  
  87.     var index = arr.indexOf(ele);  
  88.     if(index > -1) {  
  89.         arr.splice(index, 1);  
  90.     }  
  91.     return arr;  
  92.  
  93. /*将类数组转换为数组的方法*/  
  94. formArray (ary) {  
  95.     var arr = [];  
  96.     if(Array.isArray(ary)) {  
  97.         arr = ary;  
  98.     } else {  
  99.         arr = Array.prototype.slice.call(ary);  
  100.     };  
  101.     return arr;  
  102.  
  103.  
  104. /*最大值*/  
  105. max (arr) {  
  106.     return Math.max.apply(null, arr);  
  107.  
  108.  
  109. /*最小值*/  
  110. min (arr) {  
  111.     return Math.min.apply(null, arr);  
  112.  
  113.  
  114. /*求和*/  
  115. sum (arr) {  
  116.     return arr.reduce( (pre, cur) => {  
  117.         return pre + cur  
  118.     })  
  119.   
  120.  
  121. /*平均值*/  
  122. average (arr) {  
  123.     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.  
  9. trim (str, type) {  
  10.     type = type || 1  
  11.     switch (type) {  
  12.         case 1:  
  13.             return str.replace(/\s+/g, "");  
  14.         case 2:  
  15.             return str.replace(/(^\s*)|(\s*$)/g, "");  
  16.         case 3: 
  17.              return str.replace(/(^\s*)/g, "");  
  18.         case 4: 
  19.              return str.replace(/(\s*$)/g, "");  
  20.         default 
  21.             return str;  
  22.     }  
  23.  
  24.  
  25. /**  
  26.  * @param  {str}   
  27.  * @param  {type}  
  28.  *       type:  1:首字母大写  2:首页母小写  3:大小写转换  4:全部大写  5:全部小写  
  29.  * @return {String}  
  30.  */  
  31. changeCase (str, type) {  
  32.     type = type || 4  
  33.     switch (type) {  
  34.         case 1:  
  35.             return str.replace(/\b\w+\b/g, function (word) {  
  36.                 return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();   
  37.             });  
  38.         case 2:  
  39.             return str.replace(/\b\w+\b/g, function (word) {  
  40.                 return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();  
  41.             });  
  42.         case 3: 
  43.             return str.split('').map( function(word){  
  44.                 if (/[a-z]/.test(word)) {  
  45.                     return word.toUpperCase();  
  46.                 }else 
  47.                     return word.toLowerCase()  
  48.                 }  
  49.             }).join('' 
  50.         case 4:  
  51.             return str.toUpperCase();  
  52.         case 5:  
  53.             return str.toLowerCase();  
  54.         default 
  55.             return str;  
  56.     }  
  57.   
  58.  
  59. /*  
  60.     检测密码强度  
  61. */  
  62. checkPwd (str) {  
  63.     var Lv = 0;  
  64.     if (str.length < 6) {  
  65.         return Lv  
  66.     }  
  67.     if (/[0-9]/.test(str)) {  
  68.         Lv++  
  69.     } 
  70.  
  71.     if (/[a-z]/.test(str)) {  
  72.         Lv++  
  73.     } 
  74.  
  75.     if (/[A-Z]/.test(str)) {  
  76.         Lv++  
  77.     } 
  78.  
  79.     if (/[\.|-|_]/.test(str)) {  
  80.         Lv++  
  81.     }  
  82.     return Lv;  
  83.   
  84.  
  85. /*过滤html代码(把<>转换)*/  
  86. filterTag (str) { 
  87.  
  88.     str = str.replace(/&/ig, "&amp;");  
  89.     str = str.replace(/</ig, "&lt;");  
  90.     str = str.replace(/>/ig, "&gt;");  
  91.     str = str.replace(" ""&nbsp;");  
  92.     return str; 
  93.  

5. Number

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

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. /*检测类名*/  
  17. hasClass (ele, name) {  
  18.     return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));  
  19.   
  20.  
  21. /*添加类名*/  
  22. addClass (ele, name) {  
  23.     if (!this.hasClass(ele, name)) ele.className += " " + name 
  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. siblings (ele) {  
  40.     console.log(ele.parentNode)  
  41.     var chid = ele.parentNode.children,eleMatch = [];   
  42.     for(var i = 0, len = chid.length; i < len; i ++){   
  43.         if(chid[i] != ele){   
  44.             eleMatch.push(chid[i]);   
  45.         }  
  46.     }   
  47.     return eleMatch;  
  48.  
  49.  
  50. /*获取行间样式属性*/  
  51. getByStyle (obj,name){  
  52.     if(obj.currentStyle){  
  53.         return  obj.currentStyle[name];  
  54.     }else
  55.         return  getComputedStyle(obj,false)[name]; 
  56.     }  

8. Storage 储存操作

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

9. Other 其它操作

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

CSS

1. pc-reset PC样式初始化

  1. /* normalize.css */ 
  2.  
  3. html { 
  4.  
  5.   line-height: 1.15; 
  6.  
  7.   /* 1 */ 
  8.  
  9.   -ms-text-size-adjust: 100%; 
  10.  
  11.   /* 2 */ 
  12.  
  13.   -webkit-text-size-adjust: 100%; 
  14.  
  15.   /* 2 */ 
  16.  
  17.   
  18.  
  19. body { 
  20.  
  21.   margin: 0; 
  22.  
  23.  
  24.  
  25. article, 
  26.  
  27. aside, 
  28.  
  29. footer, 
  30.  
  31. header, 
  32.  
  33. nav, 
  34.  
  35. section { 
  36.  
  37.   display: block; 
  38.  
  39.   
  40.  
  41. h1 { 
  42.  
  43.   font-size: 2em; 
  44.  
  45.   margin: 0.67em 0; 
  46.  
  47.  
  48. figcaption, 
  49.  
  50. figure, 
  51.  
  52. main { 
  53.  
  54.   /* 1 */  
  55.   display: block; 
  56.  
  57.  
  58.  
  59. figure {  
  60.   margin: 1em 40px; 
  61.  
  62.  
  63.  
  64. hr { 
  65.  
  66.   box-sizing: content-box; 
  67.  
  68.   /* 1 */ 
  69.  
  70.   height: 0; 
  71.  
  72.   /* 1 */ 
  73.  
  74.   overflow: visible; 
  75.  
  76.   /* 2 */ 
  77.  
  78.   
  79.  
  80. pre { 
  81.  
  82.   font-family: monospace, monospace; 
  83.  
  84.   /* 1 */ 
  85.  
  86.   font-size: 1em; 
  87.  
  88.   /* 2 */ 
  89.  
  90.   
  91.  
  92. a { 
  93.  
  94.   background-color: transparent; 
  95.  
  96.   /* 1 */ 
  97.  
  98.   -webkit-text-decoration-skip: objects; 
  99.  
  100.   /* 2 */ 
  101.  
  102.  
  103.  
  104. abbr[title] { 
  105.  
  106.   border-bottom: none; 
  107.  
  108.   /* 1 */ 
  109.  
  110.   text-decoration: underline; 
  111.  
  112.   /* 2 */ 
  113.  
  114.   text-decoration: underline dotted; 
  115.  
  116.   /* 2 */ 
  117.  
  118.  
  119.  
  120. b, 
  121.  
  122. strong { 
  123.  
  124.   font-weight: inherit; 
  125.  
  126.  
  127.  
  128. b, 
  129.  
  130. strong { 
  131.  
  132.   font-weight: bolder; 
  133.  
  134.  
  135. code, 
  136.  
  137. kbd, 
  138.  
  139. samp { 
  140.  
  141.   font-family: monospace, monospace; 
  142.  
  143.   /* 1 */ 
  144.  
  145.   font-size: 1em; 
  146.  
  147.   /* 2 */ 
  148.  
  149.  
  150. dfn { 
  151.  
  152.   font-style: italic; 
  153.  
  154.  
  155. mark {  
  156.   background-color: #ff0;  
  157.   color: #000;  
  158.  
  159. small {  
  160.   font-size: 80%;  
  161.  
  162.  
  163. sub, 
  164.  
  165. sup { 
  166.  
  167.   font-size: 75%;  
  168.   line-height: 0;  
  169.   position: relative 
  170.   vertical-align: baseline;  
  171.  
  172.  
  173.  
  174. sub {  
  175.   bottom: -0.25em;  
  176.  
  177. sup {  
  178.   top: -0.5em;  
  179.  
  180. audio,  
  181. video {  
  182.   display: inline-block;  
  183.  
  184. audio:not([controls]) {  
  185.   display: none;  
  186.   height: 0;  
  187.  
  188.  
  189. img {  
  190.   border-style: none;  
  191.  
  192. svg:not(:root) {  
  193.   overflow: hidden;  
  194.  
  195. button, 
  196.  
  197. input, 
  198.  
  199. optgroup, 
  200.  
  201. select
  202.  
  203. textarea { 
  204.  
  205.   font-family: sans-serif; 
  206.  
  207.   /* 1 */ 
  208.  
  209.   font-size: 100%; 
  210.  
  211.   /* 1 */ 
  212.  
  213.   line-height: 1.15; 
  214.  
  215.   /* 1 */ 
  216.  
  217.   margin: 0; 
  218.  
  219.   /* 2 */ 
  220.  
  221.  
  222. button,  
  223. input { 
  224.  
  225.   /* 1 */ 
  226.  
  227.   overflow: visible; 
  228.  
  229.  
  230. button,  
  231. select { 
  232.  
  233.   /* 1 */ 
  234.  
  235.   text-transform: none; 
  236.  
  237.  
  238. button, 
  239.  
  240. html [type="button"],   
  241.  
  242. /* 1 */  
  243.  
  244. [type="reset"], 
  245.  
  246. [type="submit"] { 
  247.  
  248.   -webkit-appearance: button; 
  249.  
  250.   /* 2 */ 
  251.  
  252.  
  253. button::-moz-focus-inner
  254.  
  255. [type="button"]::-moz-focus-inner
  256.  
  257. [type="reset"]::-moz-focus-inner
  258.  
  259. [type="submit"]::-moz-focus-inner {  
  260.   border-style: none;  
  261.   padding: 0; 
  262.  
  263.  
  264.  
  265.  
  266. button:-moz-focusring, 
  267.  
  268. [type="button"]:-moz-focusring, 
  269.  
  270. [type="reset"]:-moz-focusring, 
  271.  
  272. [type="submit"]:-moz-focusring { 
  273.  
  274.   outline: 1px dotted ButtonText; 
  275.  
  276.  
  277. fieldset { 
  278.  
  279.   padding: 0.35em 0.75em 0.625em; 
  280.  
  281.  
  282. legend { 
  283.  
  284.   box-sizing: border-box; 
  285.  
  286.   /* 1 */ 
  287.  
  288.   color: inherit; 
  289.  
  290.   /* 2 */ 
  291.  
  292.   display: table
  293.  
  294.   /* 1 */ 
  295.  
  296.   max-width: 100%; 
  297.  
  298.   /* 1 */ 
  299.  
  300.   padding: 0; 
  301.  
  302.   /* 3 */ 
  303.  
  304.   white-space: normal; 
  305.  
  306.   /* 1 */ 
  307.  
  308.  
  309. progress { 
  310.  
  311.   display: inline-block; 
  312.  
  313.   /* 1 */ 
  314.  
  315.   vertical-align: baseline; 
  316.  
  317.   /* 2 */ 
  318.  
  319.  
  320. textarea { 
  321.  
  322.   overflow: auto; 
  323.  
  324.  
  325. [type="checkbox"], 
  326.  
  327. [type="radio"] { 
  328.  
  329.   box-sizing: border-box; 
  330.  
  331.   /* 1 */ 
  332.  
  333.   padding: 0; 
  334.  
  335.   /* 2 */ 
  336.  
  337.  
  338. [type="number"]::-webkit-inner-spin-button, 
  339.  
  340. [type="number"]::-webkit-outer-spin-button { 
  341.  
  342.   height: auto; 
  343.  
  344.  
  345. [type="search"] { 
  346.  
  347.   -webkit-appearance: textfield; 
  348.  
  349.   /* 1 */ 
  350.  
  351.   outline-offset: -2px; 
  352.  
  353.   /* 2 */ 
  354.  
  355.  
  356. [type="search"]::-webkit-search-cancel-button, 
  357.  
  358. [type="search"]::-webkit-search-decoration { 
  359.  
  360.   -webkit-appearance: none; 
  361.  
  362.  
  363.  ::-webkit-file-upload-button { 
  364.  
  365.   -webkit-appearance: button; 
  366.  
  367.   /* 1 */ 
  368.  
  369.   font: inherit; 
  370.  
  371.   /* 2 */ 
  372.  
  373.  
  374. details,  
  375.  
  376. /* 1 */  
  377.  
  378. menu { 
  379.  
  380.   display: block; 
  381.  
  382.  
  383. summary { 
  384.  
  385.   display: list-item; 
  386.  
  387.  
  388. canvas { 
  389.  
  390.   display: inline-block; 
  391.  
  392.  
  393. template { 
  394.  
  395.   display: none; 
  396.  
  397.  
  398. [hidden] { 
  399.  
  400.   display: none; 
  401.  
  402.  
  403.  
  404. /* reset */  
  405.  
  406. html, 
  407.  
  408. body, 
  409.  
  410. h1, 
  411.  
  412. h2, 
  413.  
  414. h3, 
  415.  
  416. h4, 
  417.  
  418. h5, 
  419.  
  420. h6, 
  421.  
  422. div, 
  423.  
  424. dl, 
  425.  
  426. dt, 
  427.  
  428. dd, 
  429.  
  430. ul, 
  431.  
  432. ol, 
  433.  
  434. li, 
  435.  
  436. p, 
  437.  
  438. blockquote, 
  439.  
  440. pre, 
  441.  
  442. hr, 
  443.  
  444. figure, 
  445.  
  446. table
  447.  
  448. caption, 
  449.  
  450. th, 
  451.  
  452. td, 
  453.  
  454. form, 
  455.  
  456. fieldset, 
  457.  
  458. legend, 
  459.  
  460. input, 
  461.  
  462. button, 
  463.  
  464. textarea, 
  465.  
  466. menu { 
  467.  
  468.   margin: 0; 
  469.  
  470.   padding: 0; 
  471.  
  472.   box-sizing: border-box; 
  473.  

2. Phone-reset

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

3. 公共样式提取

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

以上都是经常用到的方法

【编辑推荐】

  1. Javascript调试命令——你只会Console.log() ?
  2. 前端开发程序员的月薪到底有多高?
  3. 使用 Rust 加速前端 Log Service
  4. HackerRank: JavaScript人才大热 开发者却更爱Python
  5. JavaScript 2018: 你需要和不需要深入的
【责任编辑:庞桂玉 TEL:(010)68476606】

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

读 书 +更多

软件架构设计

本书紧紧围绕“软件架构设计”这一主题,立足实践解析了软件架构的概念,阐述了切实可行的软件架构设计方法,提供了可操作性极强的完整的架...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊