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

Javascript总结（常用工具类的封装）

作者：咚子
开发 前端
因为工作中经常用到这些方法，所有便把这些方法进行了总结，希望对大家有所帮助。

Javascript总结（常用工具类的封装）

前言

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

JavaScript

1. type 类型判断 

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

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

3. Array 

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

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 (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.  
  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.  
  119. } 

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. /*获取兄弟节点*/  
  40. siblings (ele) {  
  41.     console.log(ele.parentNode)  
  42.     var chid = ele.parentNode.children,eleMatch = [];   
  43.     for(var i = 0, len = chid.length; i < len; i ++){   
  44.         if(chid[i] != ele){   
  45.             eleMatch.push(chid[i]);   
  46.         }  
  47.     }   
  48.     return eleMatch;  
  49. }  
  50.  
  51. /*获取行间样式属性*/  
  52. getByStyle (obj,name){  
  53.     if(obj.currentStyle){  
  54.         return  obj.currentStyle[name];  
  55.     }else{ 
  56.         return  getComputedStyle(obj,false)[name]; 
  57.     }  
  58. } 

8. Storage 储存操作 

  1. class StorageFn {  
  2.     constructor () {  
  3.         this.ls = window.localStorage;  
  4.         this.ss = window.sessionStorage;  
  5.     }   
  6.     /*-----------------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 (key) return 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 (key) return 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.     }  
  98. } 

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

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

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

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

以上都是经常用到的方法

 

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

2019-02-13 14:58:43

cssjavascript前端
JavaScript 和 CSS 常用工具方法封装
因为工作中经常用到这些JavaScript和CSS常用工具方法，所有便把这些方法进行了总结。

2019-03-14 15:40:13

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

2022-12-05 14:39:33

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

2019-07-08 15:10:17

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

2009-01-04 11:55:09

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

2014-10-21 15:11:29

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

2011-02-21 12:44:05

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

2010-06-12 13:59:12

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

2011-04-08 17:24:05

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

2010-04-29 10:22:11

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

2010-06-04 17:56:22

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

2010-06-13 15:35:01

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

2019-03-25 19:13:37

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

2021-02-05 23:23:55

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

2010-07-08 13:17:19

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

2010-06-04 14:00:32

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

2014-04-09 10:51:56

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

2009-09-07 10:34:47

Oracle监控中的一些常用工具
以下的文章主要是描述在Linux操作系统下Oracle监控的一些常用工具，其中包括top、Ps、还有Kill、等一些工具的介绍。

2010-04-19 14:37:14

Oracle监控
Kubernetes 生态下的 GitOps 常用工具大盘点
在本文中，我将回顾一些我比较喜欢的GitOps[1]工具，这些工具目前在Kubernetes中可用。

2022-07-26 10:00:14

KubernetesGitOps工具
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服