JavaScript常用工具方法封装

素颜马尾好姑娘i 2022-03-07 06:13 333阅读 0赞

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

JavaScript

1. type 类型判断

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

2. Date

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

3. Array

  1. /*判断一个元素是否在数组中*/
  2. contains (arr, val) {
  3.     return arr.indexOf(val) != -1 ? true : false;
  4. }
  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. }
  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. }
  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. }
  57. /*去重*/
  58. unique (arr) {
  59.     if ( Array.hasOwnProperty('from') ) {
  60.         return Array.from(new Set(arr));
  61.     }else{
  62.         var n = {},r=[]; 
  63.         for(var i = 0; i < arr.length; i++){
  64.             if (!n[arr[i]]){
  65.                 n[arr[i]] = true; 
  66.                 r.push(arr[i]);
  67.             }
  68.         }
  69.         return r;
  70.     }
  71.     // 注：上面 else 里面的排重并不能区分 2 和 '2'，但能减少用indexOf带来的性能,暂时没找到替代的方法。。。
  72.     /* 正确排重
  73.     if ( Array.hasOwnProperty('from') ) {
  74.         return Array.from(new Set(arr))
  75.     }else{
  76.         var r = [], NaNBol = true
  77.         for(var i=0; i < arr.length; i++) {
  78.             if (arr[i] !== arr[i]) {
  79.                 if (NaNBol && r.indexOf(arr[i]) === -1) {
  80.                     r.push(arr[i])
  81.                     NaNBol = false
  82.                 }
  83.             }else{
  84.                 if(r.indexOf(arr[i]) === -1) r.push(arr[i])
  85.             }
  86.         }
  87.         return r
  88.     }
  90.      */
  91. }
  93. /*求两个集合的并集*/
  94. union (a, b) {
  95.     var newArr = a.concat(b);
  96.     return this.unique(newArr);
  97. }
  99. /*求两个集合的交集*/
  100. intersect (a, b) {
  101.     var _this = this;
  102.     a = this.unique(a);
  103.     return this.map(a, function(o) {
  104.         return _this.contains(b, o) ? o : null;
  105.     });
  106. }
  108. /*删除其中一个元素*/
  109. remove (arr, ele) {
  110.     var index = arr.indexOf(ele);
  111.     if(index > -1) {
  112.         arr.splice(index, 1);
  113.     }
  114.     return arr;
  115. }
  117. /*将类数组转换为数组的方法*/
  118. formArray (ary) {
  119.     var arr = [];
  120.     if(Array.isArray(ary)) {
  121.         arr = ary;
  122.     } else {
  123.         arr = Array.prototype.slice.call(ary);
  124.     };
  125.     return arr;
  126. }
  128. /*最大值*/
  129. max (arr) {
  130.     return Math.max.apply(null, arr);
  131. }
  133. /*最小值*/
  134. min (arr) {
  135.     return Math.min.apply(null, arr);
  136. }
  138. /*求和*/
  139. sum (arr) {
  140.     return arr.reduce( (pre, cur) => {
  141.         return pre + cur
  142.     })
  143. }
  145. /*平均值*/
  146. average (arr) {
  147.     return this.sum(arr)/arr.length
  148. }

4. String 字符串操作

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

5. Number

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

7. DOM

  1. $ (selector){ 
  2.     var type = selector.substring(0, 1);
  3.     if (type === '#') {
  4.         if (document.querySelecotor) return document.querySelector(selector)
  5.             return document.getElementById(selector.substring(1))
  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. } 
  15. /*检测类名*/
  16. hasClass (ele, name) {
  17.     return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
  18. }
  20. /*添加类名*/
  21. addClass (ele, name) {
  22.     if (!this.hasClass(ele, name)) ele.className += " " + name;
  23. }
  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. }
  33. /*替换类名*/
  34. replaceClass (ele, newName, oldName) {
  35.     this.removeClass(ele, oldName);
  36.     this.addClass(ele, newName);
  37. }
  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. }
  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.     }
  7.     /*-----------------cookie---------------------*/
  8.     /*设置cookie*/
  9.     setCookie (name, value, day) {
  10.         var setting = arguments[0];
  11.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
  12.             for (var i in setting) {
  13.                 var oDate = new Date();
  14.                 oDate.setDate(oDate.getDate() + day);
  15.                 document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
  16.             }
  17.         }else{
  18.             var oDate = new Date();
  19.             oDate.setDate(oDate.getDate() + day);
  20.             document.cookie = name + '=' + value + ';expires=' + oDate;
  21.         }
  23.     }
  25.     /*获取cookie*/
  26.     getCookie (name) {
  27.         var arr = document.cookie.split('; ');
  28.         for (var i = 0; i < arr.length; i++) {
  29.             var arr2 = arr[i].split('=');
  30.             if (arr2[0] == name) {
  31.                 return arr2[1];
  32.             }
  33.         }
  34.         return '';
  35.     }
  37.     /*删除cookie*/
  38.     removeCookie (name) {
  39.         this.setCookie(name, 1, -1);
  40.     }
  42.     /*-----------------localStorage---------------------*/
  43.     /*设置localStorage*/
  44.     setLocal(key, val) {
  45.         var setting = arguments[0];
  46.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
  47.             for(var i in setting){
  48.                 this.ls.setItem(i, JSON.stringify(setting[i]))
  49.             }
  50.         }else{
  51.             this.ls.setItem(key, JSON.stringify(val))
  52.         }
  54.     }
  56.     /*获取localStorage*/
  57.     getLocal(key) {
  58.         if (key) return JSON.parse(this.ls.getItem(key))
  59.         return null;
  61.     }
  63.     /*移除localStorage*/
  64.     removeLocal(key) {
  65.         this.ls.removeItem(key)
  66.     }
  68.     /*移除所有localStorage*/
  69.     clearLocal() {
  70.         this.ls.clear()
  71.     }
  73.     /*-----------------sessionStorage---------------------*/
  74.     /*设置sessionStorage*/
  75.     setSession(key, val) {
  76.         var setting = arguments[0];
  77.         if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
  78.             for(var i in setting){
  79.                 this.ss.setItem(i, JSON.stringify(setting[i]))
  80.             }
  81.         }else{
  82.             this.ss.setItem(key, JSON.stringify(val))
  83.         }
  85.     }
  87.     /*获取sessionStorage*/
  88.     getSession(key) {
  89.         if (key) return JSON.parse(this.ss.getItem(key))
  90.         return null;
  92.     }
  94.     /*移除sessionStorage*/
  95.     removeSession(key) {
  96.         this.ss.removeItem(key)
  97.     }
  99.     /*移除所有sessionStorage*/
  100.     clearSession() {
  101.         this.ss.clear()
  102.     }
  104. }

9. Other 其它操作

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

CSS

1. pc-reset PC样式初始化

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

2. Phone-reset

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

3. 公共样式提取

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

发表评论

表情：
评论列表 （有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读