JavaScript常用方法工具類封裝2018-04-16

JavaScript

1. type 類型判斷

isString (o) {//是否字符串

returnObject.prototype.toString.call(o).slice(8,-1) ==='String'

}

isNumber (o) {//是否數(shù)字

returnObject.prototype.toString.call(o).slice(8,-1) ==='Number'

}

isBoolean (o) {//是否boolean

returnObject.prototype.toString.call(o).slice(8,-1) ==='Boolean'

}

isFunction (o) {//是否函數(shù)

returnObject.prototype.toString.call(o).slice(8,-1) ==='Function'

}

isNull (o) {//是否為null

returnObject.prototype.toString.call(o).slice(8,-1) ==='Null'

}

isUndefined (o) {//是否undefined

returnObject.prototype.toString.call(o).slice(8,-1) ==='Undefined'

}

isObj (o) {//是否對象

returnObject.prototype.toString.call(o).slice(8,-1) ==='Object'

}

isArray (o) {//是否數(shù)組

returnObject.prototype.toString.call(o).slice(8,-1) ==='Array'

}

isDate (o) {//是否時間

returnObject.prototype.toString.call(o).slice(8,-1) ==='Date'

}

isRegExp (o) {//是否正則

returnObject.prototype.toString.call(o).slice(8,-1) ==='RegExp'

}

isError (o) {//是否錯誤對象

returnObject.prototype.toString.call(o).slice(8,-1) ==='Error'

}

isSymbol (o) {//是否Symbol函數(shù)

returnObject.prototype.toString.call(o).slice(8,-1) ==='Symbol'

}

isPromise (o) {//是否Promise對象

returnObject.prototype.toString.call(o).slice(8,-1) ==='Promise'

}

isSet (o) {//是否Set對象

returnObject.prototype.toString.call(o).slice(8,-1) ==='Set'

}

isFalse (o) {

if(!o || o ==='null'|| o ==='undefined'|| o ==='false'|| o ==='NaN')returntrue

returnfalse

}

isTrue (o) {

return!this.isFalse(o)

}

isIos () {

varu = navigator.userAgent;

if(u.indexOf('Android') >-1|| u.indexOf('Linux') >-1) {//安卓手機

// return "Android";

returnfalse

}elseif(u.indexOf('iPhone') >-1) {//蘋果手機

// return "iPhone";

returntrue

}elseif(u.indexOf('iPad') >-1) {//iPad

// return "iPad";

returnfalse

}elseif(u.indexOf('Windows Phone') >-1) {//winphone手機

// return "Windows Phone";

returnfalse

}else{

returnfalse

? ? }

}

isPC () {//是否為PC端

varuserAgentInfo = navigator.userAgent;

varAgents = ["Android","iPhone",

"SymbianOS","Windows Phone",

"iPad","iPod"];

varflag =true;

for(varv =0; v < Agents.length; v++) {

if(userAgentInfo.indexOf(Agents[v]) >0) {

flag =false;

break;

? ? ? ? }

? ? }

returnflag;

}

browserType(){

varuserAgent = navigator.userAgent;//取得瀏覽器的userAgent字符串

varisOpera = userAgent.indexOf("Opera") >-1;//判斷是否Opera瀏覽器

varisIE = userAgent.indexOf("compatible") >-1&& userAgent.indexOf("MSIE") >-1&& !isOpera;//判斷是否IE瀏覽器

varisIE11 = userAgent.indexOf('Trident') >-1&& userAgent.indexOf("rv:11.0") >-1;

varisEdge = userAgent.indexOf("Edge") >-1&& !isIE;//判斷是否IE的Edge瀏覽器?

varisFF = userAgent.indexOf("Firefox") >-1;//判斷是否Firefox瀏覽器

varisSafari = userAgent.indexOf("Safari") >-1&& userAgent.indexOf("Chrome") ==-1;//判斷是否Safari瀏覽器

varisChrome = userAgent.indexOf("Chrome") >-1&& userAgent.indexOf("Safari") >-1;//判斷Chrome瀏覽器

if(isIE) {

varreIE =newRegExp("MSIE (\\d+\\.\\d+);");

? ? ? ? reIE.test(userAgent);

varfIEVersion =parseFloat(RegExp["$1"]);

if(fIEVersion ==7)return"IE7"

elseif(fIEVersion ==8)return"IE8";

elseif(fIEVersion ==9)return"IE9";

elseif(fIEVersion ==10)return"IE10";

elsereturn"IE7以下"http://IE版本過低

? ? }

if(isIE11)return'IE11';

if(isEdge)return"Edge";

if(isFF)return"FF";

if(isOpera)return"Opera";

if(isSafari)return"Safari";

if(isChrome)return"Chrome";

}

checkStr (str, type) {

switch(type) {

case'phone'://手機號碼

return/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);

case'tel'://座機

return/^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);

case'card'://身份證

return/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);

case'pwd'://密碼以字母開頭,長度在6~18之間,只能包含字母、數(shù)字和下劃線

return/^[a-zA-Z]\w{5,17}$/.test(str)

case'postal'://郵政編碼

return/[1-9]\d{5}(?!\d)/.test(str);

case'QQ'://QQ號

return/^[1-9][0-9]{4,9}$/.test(str);

case'email'://郵箱

return/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);

case'money'://金額(小數(shù)點2位)

return/^\d*(?:\.\d{0,2})?$/.test(str);

case'URL'://網(wǎng)址

return/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)

case'IP'://IP

return/((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);

case'date'://日期時間

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)

case'number'://數(shù)字

return/^[0-9]$/.test(str);

case'english'://英文

return/^[a-zA-Z]+$/.test(str);

case'chinese'://中文

return/^[\u4E00-\u9FA5]+$/.test(str);

case'lower'://小寫

return/^[a-z]+$/.test(str);

case'upper'://大寫

return/^[A-Z]+$/.test(str);

case'HTML'://HTML標記

return/<("[^"]*"|'[^']*'|[^'">])*>/.test(str);

default:

returntrue;

? ? }


// 嚴格的身份證校驗

? ? isCardID(sId) {

if(!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {

alert('你輸入的身份證長度或格式錯誤')

returnfalse

? ? ? ? }

//身份證城市

varaCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內(nèi)蒙古",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:"國外"};

if(!aCity[parseInt(sId.substr(0,2))]) {

alert('你的身份證地區(qū)非法')

returnfalse

? ? ? ? }

// 出生日期驗證

varsBirthday=(sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2))).replace(/-/g,"/"),

d =newDate(sBirthday)

if(sBirthday != (d.getFullYear()+"/"+ (d.getMonth()+1) +"/"+ d.getDate())) {

alert('身份證上的出生日期非法')

returnfalse

? ? ? ? }

// 身份證號碼校驗

varsum =0,

weights =? [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2],

codes ="10X98765432"

for(vari =0; i < sId.length -1; i++) {

? ? ? ? ? ? sum += sId[i] * weights[i];

? ? ? ? }

varlast = codes[sum %11];//計算出來的最后一位身份證號碼

if(sId[sId.length-1] != last) {

alert('你輸入的身份證號非法')

returnfalse

? ? ? ? }


returntrue

? ? }

}

2. Date

/**

* 格式化時間

*

* @param? {time} 時間

* @param? {cFormat} 格式

* @return {String} 字符串

*

* @example formatTime('2018-1-29', '{y}/{m}/vpsyuuz {h}:{i}:{s}') // -> 2018/01/29 00:00:00

*/

formatTime(time, cFormat) {

if(arguments.length ===0)returnnull

if((time +'').length ===10) {

time = +time *1000

? ? }

varformat = cFormat ||'{y}-{m}-5iylc2j {h}:{i}:{s}', date

if(typeoftime ==='object') {

? ? ? ? date = time

}else{

date =newDate(time)

? ? }

varformatObj = {

? ? ? ? y: date.getFullYear(),

m: date.getMonth() +1,

? ? ? ? d: date.getDate(),

? ? ? ? h: date.getHours(),

? ? ? ? i: date.getMinutes(),

? ? ? ? s: date.getSeconds(),

? ? ? ? a: date.getDay()

? ? }

vartime_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {

varvalue = formatObj[key]

if(key ==='a')return['一','二','三','四','五','六','日'][value -1]

if(result.length >0&& value <10) {

value ='0'+ value

? ? ? ? }

returnvalue ||0

? ? })

returntime_str

}

/**

* 返回指定長度的月份集合

*

* @param? {time} 時間

* @param? {len} 長度

* @param? {direction} 方向:? 1: 前幾個月;? 2: 后幾個月;? 3:前后幾個月? 默認 3

* @return {Array} 數(shù)組

*

* @example? getMonths('2018-1-29', 6, 1)? // ->? ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]

*/

getMonths(time, len, direction) {

varmm =newDate(time).getMonth(),

yy =newDate(time).getFullYear(),

direction =isNaN(direction) ?3: direction,

? ? ? ? index = mm;

varcutMonth =function(index){

if( index <= len && index >= -len) {

returndirection ===1? formatPre(index).concat(cutMonth(++index)):

direction ===2? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))

? ? ? ? }

return[]

? ? }

varformatNext =function(i){

vary =Math.floor(i/12),

m = i%12

return[yy+y +'-'+ (m+1)]

? ? }

varformatPre =function(i){

vary =Math.ceil(i/12),

m = i%12

m = m===0?12: m

return[yy-y +'-'+ (13- m)]

? ? }

varformatCurr =function(i){

vary =Math.floor(i/12),

yNext =Math.ceil(i/12),

m = i%12,

mNext = m===0?12: m

return[yy-yNext +'-'+ (13- mNext),yy+y +'-'+ (m+1)]

? ? }

// 數(shù)組去重

varunique =function(arr){

if(Array.hasOwnProperty('from') ) {

returnArray.from(newSet(arr));

}else{

varn = {},r=[];

for(vari =0; i < arr.length; i++){

if(!n[arr[i]]){

n[arr[i]] =true;

? ? ? ? ? ? ? ? ? ? r.push(arr[i]);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

returnr;

? ? ? ? }

? ? }

returndirection !==3? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){

returnnewDate(t1).getTime() -newDate(t2).getTime()

? ? }))

}

/**

* 返回指定長度的天數(shù)集合

*

* @param? {time} 時間

* @param? {len} 長度

* @param? {direction} 方向: 1: 前幾天;? 2: 后幾天;? 3:前后幾天? 默認 3

* @return {Array} 數(shù)組

*

* @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"]

*/

getDays(time, len, diretion) {

vartt =newDate(time)

vargetDay =function(day){

vart =newDate(time)

? ? ? ? t.setDate(t.getDate() + day)

varm = t.getMonth()+1

returnt.getFullYear()+'-'+m+'-'+t.getDate()

? ? }

vararr = []

if(diretion ===1) {

for(vari =1; i <= len; i++) {

? ? ? ? ? ? arr.unshift(getDay(-i))

? ? ? ? }

}elseif(diretion ===2) {

for(vari =1; i <= len; i++) {

? ? ? ? ? ? arr.push(getDay(i))

? ? ? ? }

}else{

for(vari =1; i <= len; i++) {

? ? ? ? ? ? arr.unshift(getDay(-i))

? ? ? ? }

arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())

for(vari =1; i <= len; i++) {

? ? ? ? ? ? arr.push(getDay(i))

? ? ? ? }

? ? }

returndiretion ===1? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :

diretion ===2? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr

}

/**

* @param? {s} 秒數(shù)

* @return {String} 字符串

*

* @example formatHMS(3610) // -> 1h0m10s

*/

formatHMS (s) {

varstr =''

if(s >3600) {

str =Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s'

}elseif(s >60) {

str =Math.floor(s/60)+'m'+s%60+'s'

}else{

str = s%60+'s'

? ? }

returnstr

}

/*獲取某月有多少天*/

getMonthOfDay (time) {

vardate =newDate(time)

varyear = date.getFullYear()

varmouth = date.getMonth() +1

vardays

//當月份為二月時,根據(jù)閏年還是非閏年判斷天數(shù)

if(mouth ==2) {

days = (year%4==0&& year%100==0&& year%400==0) || (year%4==0&& year%100!=0) ?28:29

}elseif(mouth ==1|| mouth ==3|| mouth ==5|| mouth ==7|| mouth ==8|| mouth ==10|| mouth ==12) {

//月份為:1,3,5,7,8,10,12 時,為大月.則天數(shù)為31;

days =31

}else{

//其他月份,天數(shù)為:30.

days =30

? ? }

returndays

}

/*獲取某年有多少天*/

getYearOfDay (time) {

varfirstDayYear =this.getFirstDayOfYear(time);

varlastDayYear =this.getLastDayOfYear(time);

varnumSecond = (newDate(lastDayYear).getTime() -newDate(firstDayYear).getTime())/1000;

returnMath.ceil(numSecond/(24*3600));

}

/*獲取某年的第一天*/

getFirstDayOfYear (time) {

varyear =newDate(time).getFullYear();

returnyear +"-01-01 00:00:00";

}

/*獲取某年最后一天*/

getLastDayOfYear (time) {

varyear =newDate(time).getFullYear();

vardateString = year +"-12-01 00:00:00";

varendDay =this.getMonthOfDay(dateString);

returnyear +"-12-"+ endDay +" 23:59:59";

}

/*獲取某個日期是當年中的第幾天*/

getDayOfYear (time) {

varfirstDayYear =this.getFirstDayOfYear(time);

varnumSecond = (newDate(time).getTime() -newDate(firstDayYear).getTime())/1000;

returnMath.ceil(numSecond/(24*3600));

}

/*獲取某個日期在這一年的第幾周*/

getDayOfYearWeek (time) {

varnumdays =this.getDayOfYear(time);

returnMath.ceil(numdays /7);

}

3. Array

/*判斷一個元素是否在數(shù)組中*/

contains (arr, val) {

returnarr.indexOf(val) !=-1?true:false;

}

/**

* @param? {arr} 數(shù)組

* @param? {fn} 回調(diào)函數(shù)

* @return {undefined}

*/

each (arr, fn) {

fn = fn ||Function;

vara = [];

varargs =Array.prototype.slice.call(arguments,1);

for(vari =0; i < arr.length; i++) {

varres = fn.apply(arr, [arr[i], i].concat(args));

if(res !=null) a.push(res);

? ? }

}

/**

* @param? {arr} 數(shù)組

* @param? {fn} 回調(diào)函數(shù)

* @param? {thisObj} this指向

* @return {Array}

*/

map (arr, fn, thisObj) {

varscope = thisObj ||window;

vara = [];

for(vari =0, j = arr.length; i < j; ++i) {

varres = fn.call(scope, arr[i], i,this);

if(res !=null) a.push(res);

? ? }

returna;

}

/**

* @param? {arr} 數(shù)組

* @param? {type} 1:從小到大? 2:從大到小? 3:隨機

* @return {Array}

*/

sort (arr, type =1) {

returnarr.sort((a, b) =>{

switch(type) {

case1:

returna - b;

case2:

returnb - a;

case3:

returnMath.random() -0.5;

default:

returnarr;

? ? ? ? }

? ? })

}

/*去重*/

unique (arr) {

if(Array.hasOwnProperty('from') ) {

returnArray.from(newSet(arr));

}else{

varn = {},r=[];

for(vari =0; i < arr.length; i++){

if(!n[arr[i]]){

n[arr[i]] =true;

? ? ? ? ? ? ? ? r.push(arr[i]);

? ? ? ? ? ? }

? ? ? ? }

returnr;

? ? }

// 注:上面 else 里面的排重并不能區(qū)分 2 和 '2',但能減少用indexOf帶來的性能,暫時沒找到替代的方法。。。

/* 正確排重

? ? if ( Array.hasOwnProperty('from') ) {

? ? ? ? return Array.from(new Set(arr))

? ? }else{

? ? ? ? var r = [], NaNBol = true

? ? ? ? for(var i=0; i < arr.length; i++) {

? ? ? ? ? ? if (arr[i] !== arr[i]) {

? ? ? ? ? ? ? ? if (NaNBol && r.indexOf(arr[i]) === -1) {

? ? ? ? ? ? ? ? ? ? r.push(arr[i])

? ? ? ? ? ? ? ? ? ? NaNBol = false

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? if(r.indexOf(arr[i]) === -1) r.push(arr[i])

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? return r

? ? }

? ? */

}

/*求兩個集合的并集*/

union (a, b) {

varnewArr = a.concat(b);

returnthis.unique(newArr);

}

/*求兩個集合的交集*/

intersect (a, b) {

var_this =this;

a =this.unique(a);

returnthis.map(a,function(o){

return_this.contains(b, o) ? o :null;

? ? });

}

/*刪除其中一個元素*/

remove (arr, ele) {

varindex = arr.indexOf(ele);

if(index >-1) {

arr.splice(index,1);

? ? }

returnarr;

}

/*將類數(shù)組轉(zhuǎn)換為數(shù)組的方法*/

formArray (ary) {

vararr = [];

if(Array.isArray(ary)) {

? ? ? ? arr = ary;

}else{

arr =Array.prototype.slice.call(ary);

? ? };

returnarr;

}

/*最大值*/

max (arr) {

returnMath.max.apply(null, arr);

}

/*最小值*/

min (arr) {

returnMath.min.apply(null, arr);

}

/*求和*/

sum (arr) {

returnarr.reduce((pre, cur) =>{

returnpre + cur

? ? })

}

/*平均值*/

average (arr) {

returnthis.sum(arr)/arr.length

}

4. String 字符串操作

/**

* 去除空格

* @param? {str}

* @param? {type}

*? ? ? type:? 1-所有空格? 2-前后空格? 3-前空格 4-后空格

* @return {String}

*/

trim (str, type) {

type = type ||1

switch(type) {

case1:

returnstr.replace(/\s+/g,"");

case2:

returnstr.replace(/(^\s*)|(\s*$)/g,"");

case3:

returnstr.replace(/(^\s*)/g,"");

case4:

returnstr.replace(/(\s*$)/g,"");

default:

returnstr;

? ? }

}

/**

* @param? {str}

* @param? {type}

*? ? ? type:? 1:首字母大寫? 2:首頁母小寫? 3:大小寫轉(zhuǎn)換? 4:全部大寫? 5:全部小寫

* @return {String}

*/

changeCase (str, type) {

type = type ||4

switch(type) {

case1:

returnstr.replace(/\b\w+\b/g,function(word){

returnword.substring(0,1).toUpperCase() + word.substring(1).toLowerCase();

? ? ? ? ? ? });

case2:

returnstr.replace(/\b\w+\b/g,function(word){

returnword.substring(0,1).toLowerCase() + word.substring(1).toUpperCase();

? ? ? ? ? ? });

case3:

returnstr.split('').map(function(word){

if(/[a-z]/.test(word)) {

returnword.toUpperCase();

}else{

returnword.toLowerCase()

? ? ? ? ? ? ? ? }

}).join('')

case4:

returnstr.toUpperCase();

case5:

returnstr.toLowerCase();

default:

returnstr;

? ? }

}

/*

? ? 檢測密碼強度

*/

checkPwd (str) {

varLv =0;

if(str.length <6) {

returnLv

? ? }

if(/[0-9]/.test(str)) {

? ? ? ? Lv++

? ? }

if(/[a-z]/.test(str)) {

? ? ? ? Lv++

? ? }

if(/[A-Z]/.test(str)) {

? ? ? ? Lv++

? ? }

if(/[\.|-|_]/.test(str)) {

? ? ? ? Lv++

? ? }

returnLv;

}

/*過濾html代碼(把<>轉(zhuǎn)換)*/

filterTag (str) {

str = str.replace(/&/ig,"&");

str = str.replace(/

str = str.replace(/>/ig,">");

str = str.replace(" "," ");

returnstr;

}

5. Number

/*隨機數(shù)范圍*/

random (min, max) {

if(arguments.length ===2) {

returnMath.floor(min +Math.random() * ( (max+1) - min ))

}else{

returnnull;

? ? }


}

/*將阿拉伯數(shù)字翻譯成中文的大寫數(shù)字*/

numberToChinese (num) {

varAA =newArray("零","一","二","三","四","五","六","七","八","九","十");

varBB =newArray("","十","百","仟","萬","億","點","");

vara = (""+ num).replace(/(^0*)/g,"").split("."),

k =0,

re ="";

for(vari = a[0].length -1; i >=0; i--) {

switch(k) {

case0:

re = BB[7] + re;

break;

case4:

if(!newRegExp("0{4}//d{"+ (a[0].length - i -1) +"}$")

.test(a[0]))

re = BB[4] + re;

break;

case8:

re = BB[5] + re;

BB[7] = BB[5];

k =0;

break;

? ? ? ? }

if(k %4==2&& a[0].charAt(i +2) !=0&& a[0].charAt(i +1) ==0)

re = AA[0] + re;

if(a[0].charAt(i) !=0)

re = AA[a[0].charAt(i)] + BB[k %4] + re;

? ? ? ? k++;

? ? }

if(a.length >1)// 加上小數(shù)部分(如果有小數(shù)部分)

? ? {

re += BB[6];

for(vari =0; i < a[1].length; i++)

re += AA[a[1].charAt(i)];

? ? }

if(re =='一十')

re ="十";

if(re.match(/^一/) && re.length ==3)

re = re.replace("一","");

returnre;

}

/*將數(shù)字轉(zhuǎn)換為大寫金額*/

changeToChinese (Num) {

//判斷如果傳遞進來的不是字符的話轉(zhuǎn)換為字符

if(typeofNum =="number") {

Num =newString(Num);

? ? ? ? };

Num = Num.replace(/,/g,"")//替換tomoney()中的“,”

Num = Num.replace(/ /g,"")//替換tomoney()中的空格

Num = Num.replace(/¥/g,"")//替換掉可能出現(xiàn)的¥字符

if(isNaN(Num)) {//驗證輸入的字符是否為數(shù)字

//alert("請檢查小寫金額是否正確");

return"";

? ? ? ? };

//字符處理完畢后開始轉(zhuǎn)換,采用前后兩部分分別轉(zhuǎn)換

varpart =String(Num).split(".");

varnewchar ="";

//小數(shù)點前進行轉(zhuǎn)化

for(vari = part[0].length -1; i >=0; i--) {

if(part[0].length >10) {

return"";

//若數(shù)量超過拾億單位,提示

? ? ? ? ? ? }

vartmpnewchar =""

varperchar = part[0].charAt(i);

switch(perchar) {

case"0":

tmpnewchar ="零"+ tmpnewchar;

break;

case"1":

tmpnewchar ="壹"+ tmpnewchar;

break;

case"2":

tmpnewchar ="貳"+ tmpnewchar;

break;

case"3":

tmpnewchar ="叁"+ tmpnewchar;

break;

case"4":

tmpnewchar ="肆"+ tmpnewchar;

break;

case"5":

tmpnewchar ="伍"+ tmpnewchar;

break;

case"6":

tmpnewchar ="陸"+ tmpnewchar;

break;

case"7":

tmpnewchar ="柒"+ tmpnewchar;

break;

case"8":

tmpnewchar ="捌"+ tmpnewchar;

break;

case"9":

tmpnewchar ="玖"+ tmpnewchar;

break;

? ? ? ? ? ? }

switch(part[0].length - i -1) {

case0:

tmpnewchar = tmpnewchar +"元";

break;

case1:

if(perchar !=0) tmpnewchar = tmpnewchar +"拾";

break;

case2:

if(perchar !=0) tmpnewchar = tmpnewchar +"佰";

break;

case3:

if(perchar !=0) tmpnewchar = tmpnewchar +"仟";

break;

case4:

tmpnewchar = tmpnewchar +"萬";

break;

case5:

if(perchar !=0) tmpnewchar = tmpnewchar +"拾";

break;

case6:

if(perchar !=0) tmpnewchar = tmpnewchar +"佰";

break;

case7:

if(perchar !=0) tmpnewchar = tmpnewchar +"仟";

break;

case8:

tmpnewchar = tmpnewchar +"億";

break;

case9:

tmpnewchar = tmpnewchar +"拾";

break;

? ? ? ? ? ? }

varnewchar = tmpnewchar + newchar;

? ? ? ? }

//小數(shù)點之后進行轉(zhuǎn)化

if(Num.indexOf(".") !=-1) {

if(part[1].length >2) {

// alert("小數(shù)點之后只能保留兩位,系統(tǒng)將自動截斷");

part[1] = part[1].substr(0,2)

? ? ? ? ? ? }

for(i =0; i < part[1].length; i++) {

tmpnewchar =""

perchar = part[1].charAt(i)

switch(perchar) {

case"0":

tmpnewchar ="零"+ tmpnewchar;

break;

case"1":

tmpnewchar ="壹"+ tmpnewchar;

break;

case"2":

tmpnewchar ="貳"+ tmpnewchar;

break;

case"3":

tmpnewchar ="叁"+ tmpnewchar;

break;

case"4":

tmpnewchar ="肆"+ tmpnewchar;

break;

case"5":

tmpnewchar ="伍"+ tmpnewchar;

break;

case"6":

tmpnewchar ="陸"+ tmpnewchar;

break;

case"7":

tmpnewchar ="柒"+ tmpnewchar;

break;

case"8":

tmpnewchar ="捌"+ tmpnewchar;

break;

case"9":

tmpnewchar ="玖"+ tmpnewchar;

break;

? ? ? ? ? ? ? ? }

if(i ==0) tmpnewchar = tmpnewchar +"角";

if(i ==1) tmpnewchar = tmpnewchar +"分";

? ? ? ? ? ? ? ? newchar = newchar + tmpnewchar;

? ? ? ? ? ? }

? ? ? ? }

//替換所有無用漢字

while(newchar.search("零零") !=-1)

newchar = newchar.replace("零零","零");

newchar = newchar.replace("零億","億");

newchar = newchar.replace("億萬","億");

newchar = newchar.replace("零萬","萬");

newchar = newchar.replace("零元","元");

newchar = newchar.replace("零角","");

newchar = newchar.replace("零分","");

if(newchar.charAt(newchar.length -1) =="元") {

newchar = newchar +"整"

? ? ? ? }

returnnewchar;

? ? }

6. Http

/**

* @param? {setting}

*/

ajax(setting){

//設置參數(shù)的初始值

varopts={

method: (setting.method ||"GET").toUpperCase(),//請求方式

url: setting.url ||"",// 請求地址

async: setting.async ||true,// 是否異步

dataType: setting.dataType ||"json",// 解析方式

data: setting.data ||"",// 參數(shù)

success: setting.success ||function(){},// 請求成功回調(diào)

error: setting.error ||function(){}// 請求失敗回調(diào)

? ? }

// 參數(shù)格式化

functionparams_format(obj){

varstr =''

for(variinobj) {

str += i +'='+ obj[i] +'&'

? ? ? ? }

returnstr.split('').slice(0,-1).join('')

? ? }

// 創(chuàng)建ajax對象

varxhr=newXMLHttpRequest();

// 連接服務器open(方法GET/POST,請求地址, 異步傳輸)

if(opts.method =='GET'){

xhr.open(opts.method, opts.url +"?"+ params_format(opts.data), opts.async);

? ? ? ? xhr.send();

}else{

? ? ? ? xhr.open(opts.method, opts.url, opts.async);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

? ? ? ? xhr.send(opts.data);

? ? }


/*

? ? ** 每當readyState改變時,就會觸發(fā)onreadystatechange事件

? ? ** readyState屬性存儲有XMLHttpRequest的狀態(tài)信息

? ? ** 0 :請求未初始化

? ? ** 1 :服務器連接已建立

? ? ** 2 :請求已接受

? ? ** 3 : 請求處理中

? ? ** 4 :請求已完成,且相應就緒

? ? */

xhr.onreadystatechange =function(){

if(xhr.readyState ===4&& (xhr.status ===200|| xhr.status ===304)) {

switch(opts.dataType){

case"json":

varjson =JSON.parse(xhr.responseText);

? ? ? ? ? ? ? ? ? ? opts.success(json);

break;

case"xml":

? ? ? ? ? ? ? ? ? ? opts.success(xhr.responseXML);

break;

default:

? ? ? ? ? ? ? ? ? ? opts.success(xhr.responseText);

break;

? ? ? ? ? ? }

? ? ? ? }

? ? }

xhr.onerror =function(err){

? ? ? ? opts.error(err);

? ? }

}

/**

* @param? {url}

* @param? {setting}

* @return {Promise}

*/

fetch(url, setting) {

//設置參數(shù)的初始值

letopts={

method: (setting.method ||'GET').toUpperCase(),//請求方式

headers : setting.headers? || {},// 請求頭設置

credentials : setting.credentials? ||true,// 設置cookie是否一起發(fā)送

? ? ? ? body: setting.body || {},

mode : setting.mode? ||'no-cors',// 可以設置 cors, no-cors, same-origin

redirect : setting.redirect? ||'follow',// follow, error, manual

cache : setting.cache? ||'default'// 設置 cache 模式 (default, reload, no-cache)

? ? }

letdataType = setting.dataType ||"json",// 解析方式?

data = setting.data ||""http:// 參數(shù)

// 參數(shù)格式化

functionparams_format(obj){

varstr =''

for(variinobj) {

str +=`${i}=${obj[i]}&`

? ? ? ? }

returnstr.split('').slice(0,-1).join('')

? ? }

if(opts.method ==='GET') {

url = url + (data?`?${params_format(data)}`:'')

}else{

? ? ? ? setting.body = data || {}

? ? }

returnnewPromise((resolve, reject) =>{

fetch(url, opts).then(asyncres => {

letdata = dataType ==='text'?awaitres.text() :

dataType ==='blob'?awaitres.blob() :awaitres.json()

? ? ? ? ? ? resolve(data)

}).catch(e=>{

? ? ? ? ? ? reject(e)

? ? ? ? })

? ? })


}

7. DOM

$ (selector){

vartype = selector.substring(0,1);

if(type ==='#') {

if(document.querySelecotor)returndocument.querySelector(selector)

returndocument.getElementById(selector.substring(1))


}elseif(type ==='.') {

if(document.querySelecotorAll)returndocument.querySelectorAll(selector)

returndocument.getElementsByClassName(selector.substring(1))

}else{

returndocument['querySelectorAll'?'querySelectorAll':'getElementsByTagName'](selector)

? ? }

}

/*檢測類名*/

hasClass (ele, name) {

returnele.className.match(newRegExp('(\\s|^)'+ name +'(\\s|$)'));

}

/*添加類名*/

addClass (ele, name) {

if(!this.hasClass(ele, name)) ele.className +=" "+ name;

}

/*刪除類名*/

removeClass (ele, name) {

if(this.hasClass(ele, name)) {

varreg =newRegExp('(\\s|^)'+ name +'(\\s|$)');

ele.className = ele.className.replace(reg,'');

? ? }

}

/*替換類名*/

replaceClass (ele, newName, oldName) {

this.removeClass(ele, oldName);

this.addClass(ele, newName);

}

/*獲取兄弟節(jié)點*/

siblings (ele) {

console.log(ele.parentNode)

varchid = ele.parentNode.children,eleMatch = [];

for(vari =0, len = chid.length; i < len; i ++){

if(chid[i] != ele){

? ? ? ? ? ? eleMatch.push(chid[i]);

? ? ? ? }

? ? }

returneleMatch;

}

/*獲取行間樣式屬性*/

getByStyle (obj,name){

if(obj.currentStyle){

returnobj.currentStyle[name];

}else{

returngetComputedStyle(obj,false)[name];

? ? }

}

8. Storage 儲存操作

classStorageFn{

constructor() {

this.ls =window.localStorage;

this.ss =window.sessionStorage;

? ? }

/*-----------------cookie---------------------*/

/*設置cookie*/

? ? setCookie (name, value, day) {

varsetting =arguments[0];

if(Object.prototype.toString.call(setting).slice(8,-1) ==='Object'){

for(variinsetting) {

varoDate =newDate();

? ? ? ? ? ? ? ? oDate.setDate(oDate.getDate() + day);

document.cookie = i +'='+ setting[i] +';expires='+ oDate;

? ? ? ? ? ? }

}else{

varoDate =newDate();

? ? ? ? ? ? oDate.setDate(oDate.getDate() + day);

document.cookie = name +'='+ value +';expires='+ oDate;

? ? ? ? }


? ? }

/*獲取cookie*/

? ? getCookie (name) {

vararr =document.cookie.split('; ');

for(vari =0; i < arr.length; i++) {

vararr2 = arr[i].split('=');

if(arr2[0] == name) {

returnarr2[1];

? ? ? ? ? ? }

? ? ? ? }

return'';

? ? }

/*刪除cookie*/

? ? removeCookie (name) {

this.setCookie(name,1,-1);

? ? }

/*-----------------localStorage---------------------*/

/*設置localStorage*/

? ? setLocal(key, val) {

varsetting =arguments[0];

if(Object.prototype.toString.call(setting).slice(8,-1) ==='Object'){

for(variinsetting){

this.ls.setItem(i,JSON.stringify(setting[i]))

? ? ? ? ? ? }

}else{

this.ls.setItem(key,JSON.stringify(val))

? ? ? ? }


? ? }

/*獲取localStorage*/

? ? getLocal(key) {

if(key)returnJSON.parse(this.ls.getItem(key))

returnnull;


? ? }

/*移除localStorage*/

? ? removeLocal(key) {

this.ls.removeItem(key)

? ? }

/*移除所有l(wèi)ocalStorage*/

? ? clearLocal() {

this.ls.clear()

? ? }

/*-----------------sessionStorage---------------------*/

/*設置sessionStorage*/

? ? setSession(key, val) {

varsetting =arguments[0];

if(Object.prototype.toString.call(setting).slice(8,-1) ==='Object'){

for(variinsetting){

this.ss.setItem(i,JSON.stringify(setting[i]))

? ? ? ? ? ? }

}else{

this.ss.setItem(key,JSON.stringify(val))

? ? ? ? }


? ? }

/*獲取sessionStorage*/

? ? getSession(key) {

if(key)returnJSON.parse(this.ss.getItem(key))

returnnull;


? ? }

/*移除sessionStorage*/

? ? removeSession(key) {

this.ss.removeItem(key)

? ? }

/*移除所有sessionStorage*/

? ? clearSession() {

this.ss.clear()

? ? }


}

9. Other 其它操作

/*獲取網(wǎng)址參數(shù)*/

getURL(name){

varreg =newRegExp("(^|&)"+ name +"=([^&]*)(&|$)");

varr =decodeURI(window.location.search).substr(1).match(reg);

if(r!=null)returnr[2];returnnull;

}

/*獲取全部url參數(shù),并轉(zhuǎn)換成json對象*/

getUrlAllParams (url) {

varurl = url ? url :window.location.href;

var_pa = url.substring(url.indexOf('?') +1),

_arrS = _pa.split('&'),

? ? ? ? _rs = {};

for(vari =0, _len = _arrS.length; i < _len; i++) {

varpos = _arrS[i].indexOf('=');

if(pos ==-1) {

continue;

? ? ? ? }

varname = _arrS[i].substring(0, pos),

value =window.decodeURIComponent(_arrS[i].substring(pos +1));

? ? ? ? _rs[name] = value;

? ? }

return_rs;

}

/*刪除url指定參數(shù),返回url*/

delParamsUrl(url, name){

varbaseUrl = url.split('?')[0] +'?';

varquery = url.split('?')[1];

if(query.indexOf(name)>-1) {

varobj = {}

vararr = query.split("&");

for(vari =0; i < arr.length; i++) {

arr[i] = arr[i].split("=");

obj[arr[i][0]] = arr[i][1];

? ? ? ? };

deleteobj[name];

varurl = baseUrl +JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");

returnurl

}else{

returnurl;

? ? }

}

/*獲取十六進制隨機顏色*/

getRandomColor () {

return'#'+ (function(h){

returnnewArray(7- h.length).join("0") + h;

})((Math.random() *0x1000000<<0).toString(16));

}

/*圖片加載*/

imgLoadAll(arr,callback){

vararrImg = [];

for(vari =0; i < arr.length; i++) {

varimg =newImage();

? ? ? ? img.src = arr[i];

img.onload =function(){

arrImg.push(this);

if(arrImg.length == arr.length) {

? ? ? ? ? ? ? ? callback && callback();

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

/*音頻加載*/

loadAudio(src, callback) {

varaudio =newAudio(src);

? ? audio.onloadedmetadata = callback;

? ? audio.src = src;

}

/*DOM轉(zhuǎn)字符串*/

domToStirng(htmlDOM){

vardiv=document.createElement("div");

? ? div.appendChild(htmlDOM);

returndiv.innerHTML

}

/*字符串轉(zhuǎn)DOM*/

stringToDom(htmlString){

vardiv=document.createElement("div");

? ? div.innerHTML=htmlString;

returndiv.children[0];

}

/**

* 光標所在位置插入字符,并設置光標位置

*

* @param {dom} 輸入框

* @param {val} 插入的值

* @param {posLen} 光標位置處在 插入的值的哪個位置

*/

setCursorPosition (dom,val,posLen) {

varcursorPosition =0;

if(dom.selectionStart){

? ? ? ? cursorPosition = dom.selectionStart;

? ? }

this.insertAtCursor(dom,val);

? ? dom.focus();

console.log(posLen)

? ? dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));

}

/*光標所在位置插入字符*/

insertAtCursor(dom, val) {

if(document.selection){

? ? ? ? dom.focus();

sel =document.selection.createRange();

? ? ? ? sel.text = val;

? ? ? ? sel.select();

}elseif(dom.selectionStart || dom.selectionStart =='0'){

letstartPos = dom.selectionStart;

letendPos = dom.selectionEnd;

letrestoreTop = dom.scrollTop;

dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);

if(restoreTop >0){

? ? ? ? ? ? dom.scrollTop = restoreTop;

? ? ? ? }

? ? ? ? dom.focus();

? ? ? ? dom.selectionStart = startPos + val.length;

? ? ? ? dom.selectionEnd = startPos + val.length;

}else{

? ? ? ? dom.value += val;

? ? ? ? dom.focus();

? ? }

}

CSS

1. pc-reset PC樣式初始化

/* normalize.css */

html{

line-height:1.15;

/* 1 */

-ms-text-size-adjust:100%;

/* 2 */

-webkit-text-size-adjust:100%;

/* 2 */

}

body{

margin:0;

}

article,

aside,

footer,

header,

nav,

section{

display: block;

}

h1{

font-size:2em;

margin:0.67em0;

}

figcaption,

figure,

main{

/* 1 */

display: block;

}

figure{

margin:1em40px;

}

hr{

box-sizing: content-box;

/* 1 */

height:0;

/* 1 */

overflow: visible;

/* 2 */

}

pre{

font-family: monospace, monospace;

/* 1 */

font-size:1em;

/* 2 */

}

a{

background-color: transparent;

/* 1 */

-webkit-text-decoration-skip: objects;

/* 2 */

}

abbr[title]{

border-bottom: none;

/* 1 */

text-decoration: underline;

/* 2 */

text-decoration: underline dotted;

/* 2 */

}

b,

strong{

font-weight: inherit;

}

b,

strong{

font-weight: bolder;

}

code,

kbd,

samp{

font-family: monospace, monospace;

/* 1 */

font-size:1em;

/* 2 */

}

dfn{

font-style: italic;

}

mark{

background-color:#ff0;

color:#000;

}

small{

font-size:80%;

}

sub,

sup{

font-size:75%;

line-height:0;

position: relative;

vertical-align: baseline;

}

sub{

bottom: -0.25em;

}

sup{

top: -0.5em;

}

audio,

video{

display: inline-block;

}

audio:not([controls]) {

display: none;

height:0;

}

img{

border-style: none;

}

svg:not(:root){

overflow: hidden;

}

button,

input,

optgroup,

select,

textarea{

font-family: sans-serif;

/* 1 */

font-size:100%;

/* 1 */

line-height:1.15;

/* 1 */

margin:0;

/* 2 */

}

button,

input{

/* 1 */

overflow: visible;

}

button,

select{

/* 1 */

text-transform: none;

}

button,

html[type="button"],

/* 1 */

[type="reset"],

[type="submit"]{

-webkit-appearance: button;

/* 2 */

}

button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner{

border-style: none;

padding:0;

}

button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring{

outline:1pxdotted ButtonText;

}

fieldset{

padding:0.35em0.75em0.625em;

}

legend{

box-sizing: border-box;

/* 1 */

color: inherit;

/* 2 */

display: table;

/* 1 */

max-width:100%;

/* 1 */

padding:0;

/* 3 */

white-space: normal;

/* 1 */

}

progress{

display: inline-block;

/* 1 */

vertical-align: baseline;

/* 2 */

}

textarea{

overflow: auto;

}

[type="checkbox"],

[type="radio"]{

box-sizing: border-box;

/* 1 */

padding:0;

/* 2 */

}

[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button{

height: auto;

}

[type="search"]{

-webkit-appearance: textfield;

/* 1 */

outline-offset: -2px;

/* 2 */

}

[type="search"]::-webkit-search-cancel-button,

[type="search"]::-webkit-search-decoration{

-webkit-appearance: none;

}

::-webkit-file-upload-button{

-webkit-appearance: button;

/* 1 */

font: inherit;

/* 2 */

}

details,

/* 1 */

menu{

display: block;

}

summary{

display: list-item;

}

canvas{

display: inline-block;

}

template{

display: none;

}

[hidden]{

display: none;

}

/* reset */

html,

body,

h1,

h2,

h3,

h4,

h5,

h6,

div,

dl,

dt,

dd,

ul,

ol,

li,

p,

blockquote,

pre,

hr,

figure,

table,

caption,

th,

td,

form,

fieldset,

legend,

input,

button,

textarea,

menu{

margin:0;

padding:0;

box-sizing: border-box;

}

2. Phone-reset

/* normalize.css */

html {

line-height:1.15;

/* 1 */

-ms-text-size-adjust:100%;

/* 2 */

-webkit-text-size-adjust:100%;

/* 2 */

}

body {

margin:0;

}

article,

aside,

footer,

header,

nav,

section {

? display: block;

}

h1 {

font-size:2em;

margin:0.67em0;

}

figcaption,

figure,

main {

/* 1 */

? display: block;

}

figure {

margin:1em40px;

}

hr {

? box-sizing: content-box;

/* 1 */

height:0;

/* 1 */

? overflow: visible;

/* 2 */

}

pre {

? font-family: monospace, monospace;

/* 1 */

font-size:1em;

/* 2 */

}

a {

? background-color: transparent;

/* 1 */

? -webkit-text-decoration-skip: objects;

/* 2 */

}

abbr[title] {

? border-bottom: none;

/* 1 */

? text-decoration: underline;

/* 2 */

? text-decoration: underline dotted;

/* 2 */

}

b,

strong {

? font-weight: inherit;

}

b,

strong {

? font-weight: bolder;

}

code,

kbd,

samp {

? font-family: monospace, monospace;

/* 1 */

font-size:1em;

/* 2 */

}

dfn {

? font-style: italic;

}

mark {

? background-color: #ff0;

? color: #000;

}

small {

font-size:80%;

}

sub,

sup {

font-size:75%;

line-height:0;

? position: relative;

? vertical-align: baseline;

}

sub {

bottom:-0.25em;

}

sup {

top:-0.5em;

}

audio,

video {

? display: inline-block;

}

audio:not([controls]) {

? display: none;

height:0;

}

img {

? border-style: none;

}

svg:not(:root) {

? overflow: hidden;

}

button,

input,

optgroup,

select,

textarea {

? font-family: sans-serif;

/* 1 */

font-size:100%;

/* 1 */

line-height:1.15;

/* 1 */

margin:0;

/* 2 */

}

button,

input {

/* 1 */

? overflow: visible;

}

button,

select {

/* 1 */

? text-transform: none;

}

button,

html [type="button"],

/* 1 */

[type="reset"],

[type="submit"] {

? -webkit-appearance: button;

/* 2 */

}

button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

? border-style: none;

padding:0;

}

button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

outline:1px dotted ButtonText;

}

fieldset {

padding:0.35em0.75em0.625em;

}

legend {

? box-sizing: border-box;

/* 1 */

? color: inherit;

/* 2 */

? display: table;

/* 1 */

max-width:100%;

/* 1 */

padding:0;

/* 3 */

? white-space: normal;

/* 1 */

}

progress {

? display: inline-block;

/* 1 */

? vertical-align: baseline;

/* 2 */

}

textarea {

? overflow: auto;

}

[type="checkbox"],

[type="radio"] {

? box-sizing: border-box;

/* 1 */

padding:0;

/* 2 */

}

[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

? height: auto;

}

[type="search"] {

? -webkit-appearance: textfield;

/* 1 */

outline-offset:-2px;

/* 2 */

}

[type="search"]::-webkit-search-cancel-button,

[type="search"]::-webkit-search-decoration {

? -webkit-appearance: none;

}

::-webkit-file-upload-button {

? -webkit-appearance: button;

/* 1 */

? font: inherit;

/* 2 */

}

details,

/* 1 */

menu {

? display: block;

}

summary {

? display: list-item;

}

canvas {

? display: inline-block;

}

template {

? display: none;

}

[hidden] {

? display: none;

}

/* reset */

html,

body,

h1,

h2,

h3,

h4,

h5,

h6,

div,

dl,

dt,

dd,

ul,

ol,

li,

p,

blockquote,

pre,

hr,

figure,

table,

caption,

th,

td,

form,

fieldset,

legend,

input,

button,

textarea,

menu {

margin:0;

padding:0;

? box-sizing: border-box;

}

html,

body {

/* 禁止選中文本 */

? -webkit-user-select: none;

? user-select: none;

font: Oswald,'Open Sans', Helvetica, Arial, sans-serif

}

/* 禁止長按鏈接與圖片彈出菜單 */

a,

img {

? -webkit-touch-callout: none;

}

/*ios android去除自帶陰影的樣式*/

a,

input {

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

input[type="text"] {

? -webkit-appearance: none;

}

3. 公共樣式提取

/* 禁止選中文本 */

.usn{

? ? -webkit-user-select:none;

? ? -moz-user-select:none;

? ? -ms-user-select:none;

? ? -o-user-select:none;

? ? user-select:none;

}

/* 浮動 */

.fl {float: left; }

.fr {float: right; }

.cf {zoom:1; }

.cf:after {

content:".";

? ? display:block;

? ? clear:both;

? ? visibility:hidden;

height:0;

? ? overflow:hidden;

}

/* 元素類型 */

.db {display: block; }

.dn {display: none; }

.di {display: inline }

.dib {display: inline-block;}

.transparent {opacity:0}

/*文字排版、顏色*/

.f12 { font-size:12px }

.f14 { font-size:14px }

.f16 { font-size:16px }

.f18 { font-size:18px }

.f20 { font-size:20px }

.fb { font-weight:bold }

.fn { font-weight:normal }

.t2 { text-indent:2em }

.red,a.red { color:#cc0031 }

.darkblue,a.darkblue { color:#039 }

.gray,a.gray { color:#878787 }

.lh150 { line-height:150% }

.lh180 { line-height:180% }

.lh200 { line-height:200% }

.unl { text-decoration:underline; }

.no_unl { text-decoration:none; }

.tl { text-align: left; }

.tc { text-align: center; }

.tr { text-align: right; }

.tj { text-align: justify; text-justify: inter-ideograph; }

.wn {/* 強制不換行 */

? ? word-wrap:normal;

? ? white-space:nowrap;

}

.wb {/* 強制換行 */

? ? white-space:normal;

word-wrap:break-word;

word-break:break-all;

}

.wp {/* 保持空白序列*/

overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;

}

.wes {/* 多出部分用省略號表示 , 用于一行 */

? ? overflow:hidden;

? ? word-wrap:normal;

? ? white-space:nowrap;

? ? text-overflow:ellipsis;

}

.wes-2{/* 適用于webkit內(nèi)核和移動端 */

? ? display: -webkit-box;

? ? -webkit-box-orient: vertical;

-webkit-line-clamp:2;

? ? overflow: hidden;

}

.wes-3{

? ? display: -webkit-box;

? ? -webkit-box-orient: vertical;

-webkit-line-clamp:3;

? ? overflow: hidden;

}

.wes-4{

? ? display: -webkit-box;

? ? -webkit-box-orient: vertical;

-webkit-line-clamp:4;

? ? overflow: hidden;

}

/* 溢出樣式 */

.ofh {overflow: hidden; }

.ofs {overflow: scroll; }

.ofa {overflow: auto; }

.ofv {overflow: visible; }

/* 定位方式 */

.ps {position:static; }

.pr {position: relative;zoom:1; }

.pa {position: absolute; }

.pf {position: fixed; }

/* 垂直對齊方式 */

.vt {vertical-align: top; }

.vm {vertical-align: middle; }

.vb {vertical-align: bottom; }

/* 鼠標樣式 */

.csd {cursor:default; }

.csp {cursor: pointer; }

.csh {cursor: help; }

.csm {cursor: move; }

/* flex布局 */

.df-sb {

? ? display:flex;

? ? align-items: center;

? ? justify-content: space-between;

}

.df-sa {

? ? display:flex;

? ? align-items: center;

? ? justify-content: space-around;

}

/* 垂直居中 */

.df-c {

? ? display: flex;

? ? align-items: center;

? ? justify-content: center;

}

.tb-c {

? ? text-align:center;

? ? display:table-cell;

? ? vertical-align:middle;

}

.ts-c {

? ? position: absolute;

left:50%; top:50%;

transform: translate(-50%,-50%);

}

.ts-mc {

? ? position: absolute;

left:0;right:0;

bottom:0; top:0;

? ? margin: auto;

}

/* 輔助 */

.mask-fixed-wrapper {

width:100%;

height:100%;

? ? position: fixed;

left:0;top:0;

background: rgba(0,0,0,0.65);

z-index:999;

}

.bg-cover {

? ? background-size: cover;

? ? background-repeat: no-repeat;

? ? background-position: center center;

}

.bg-cover-all {

background-size:100%100%;

? ? background-repeat: no-repeat;

? ? background-position: center center;

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內(nèi)容