详解javascript常用工具类的封装
前言
因为工作中经常用到这些方法，所有便把这些方法进行了总结。
JavaScript1.type类型判断
isString(o){//是否字符串
returnObject.prototype.toString.call(o).slice(8,-1)==='String'
}
isNumber(o){//是否数字
returnObject.prototype.toString.call(o).slice(8,-1)==='Number'
}
isObj(o){//是否对象
returnObject.prototype.toString.call(o).slice(8,-1)==='Object'
}
isArray(o){//是否数组
returnObject.prototype.toString.call(o).slice(8,-1)==='Array'
}
isDate(o){//是否时间
returnObject.prototype.toString.call(o).slice(8,-1)==='Date'
}
isBoolean(o){//是否boolean
returnObject.prototype.toString.call(o).slice(8,-1)==='Boolean'
}
isFunction(o){//是否函数
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'
}
isFalse(o){
if(o==''||o==undefined||o==null||o=='null'||o=='undefined'||o==0||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('WindowsPhone')>-1){//winphone手机
//return"WindowsPhone";
returnfalse
}else{
returnfalse
}
}
isPC(){//是否为PC端
varuserAgentInfo=navigator.userAgent;
varAgents=["Android","iPhone",
"SymbianOS","WindowsPhone",
"iPad","iPod"];
varflag=true;
for(varv=0;v0){
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浏览器
varisEdge=userAgent.indexOf("Edge")>-1;//判断是否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";
elseif(fIEVersion==11)return"IE11";
elsereturn"IE7以下"//IE版本过低
}
if(isFF)return"FF";
if(isOpera)return"Opera";
if(isEdge)return"Edge";
if(isSafari)return"Safari";
if(isChrome)return"Chrome";
}
checkStr(str,type){
switch(type){
case'phone'://手机号码
return/^1[3|4|5|7|8][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}$/.test(str);
case'pwd'://密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
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'://金额(小数点2位)
return/^\d*(?:\.\d{0,2})?$/.test(str);
case'URL'://网址
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'://数字
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;
}
}
2.Date
/**
*格式化时间
*
*@param{time}时间
*@param{cFormat}格式
*@return{String}字符串
*
*@exampleformatTime('2018-1-29','{y}/{m}/{d}{h}:{i}:{s}')//->2018/01/2900:00:00
*/
formatTime(time,cFormat){
if(arguments.length===0)returnnull
if((time+'').length===10){
time=+time*1000
}
varformat=cFormat||'{y}-{m}-{d}{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}数组
*
*@examplegetMonths('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)]
}
//数组去重
varunique=function(arr){
if(Array.hasOwnProperty('from')){
returnArray.from(newSet(arr));
}else{
varn={},r=[];
for(vari=0;i["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}秒数
*@return{String}字符串
*
*@exampleformatHMS(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
//当月份为二月时，根据闰年还是非闰年判断天数
if(mouth==2){
days=year%4==0?29:28
}elseif(mouth==1||mouth==3||mouth==5||mouth==7||mouth==8||mouth==10||mouth==12){
//月份为：1,3,5,7,8,10,12时，为大月.则天数为31；
days=31
}else{
//其他月份，天数为：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-0100:00:00";
}
/*获取某年最后一天*/
getLastDayOfYear(time){
varyear=newDate(time).getFullYear();
vardateString=year+"-12-0100: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
/*判断一个元素是否在数组中*/
contains(arr,val){
returnarr.indexOf(val)!=-1?true:false;
}
/**
*@param{arr}数组
*@param{fn}回调函数
*@return{undefined}
*/
each(arr,fn){
fn=fn||Function;
vara=[];
varargs=Array.prototype.slice.call(arguments,1);
for(vari=0;i{
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-1){
arr.splice(index,1);
}
returnarr;
}
/*将类数组转换为数组的方法*/
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：大小写转换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代码(把<>转换)*/
filterTag(str){
str=str.replace(/&/ig,"&");
str=str.replace(//ig,">");
str=str.replace(""," ");
returnstr;
}
5.Number
/*随机数范围*/
random(min,max){
if(arguments.length===2){
returnMath.floor(min+Math.random()*((max+1)-min))
}else{
returnnull;
}
}
/*将阿拉伯数字翻译成中文的大写数字*/
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)//加上小数部分(如果有小数部分)
{
re+=BB[6];
for(vari=0;i=0;i--){
if(part[0].length>10){
return"";
//若数量超过拾亿单位，提示
}
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;
}
//小数点之后进行转化
if(Num.indexOf(".")!=-1){
if(part[1].length>2){
//alert("小数点之后只能保留两位,系统将自动截断");
part[1]=part[1].substr(0,2)
}
for(i=0;i
6.Http
/**
*@param{setting}
*/
ajax(setting){
//设置参数的初始值
varopts={
method:(setting.method||"GET").toUpperCase(),//请求方式
url:setting.url||"",//请求地址
async:setting.async||true,//是否异步
dataType:setting.dataType||"json",//解析方式
data:setting.data||"",//参数
success:setting.success||function(){},//请求成功回调
error:setting.error||function(){}//请求失败回调
}
//参数格式化
functionparams_format(obj){
varstr=''
for(variinobj){
str+=i+'='+obj[i]+'&'
}
returnstr.split('').slice(0,-1).join('')
}
//创建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改变时，就会触发onreadystatechange事件
**readyState属性存储有XMLHttpRequest的状态信息
**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){
//设置参数的初始值
letopts={
method:(setting.method||'GET').toUpperCase(),//请求方式
headers:setting.headers||{},//请求头设置
credentials:setting.credentials||true,//设置cookie是否一起发送
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||""//参数
//参数格式化
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);
}
/*获取兄弟节点*/
siblings(ele){
console.log(ele.parentNode)
varchid=ele.parentNode.children,eleMatch=[];
for(vari=0,len=chid.length;i
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
9.Other其它操作
/*获取网址参数*/
getURL(name){
varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");
varr=window.location.search.substr(1).match(reg);
if(r!=null)returnr[2];returnnull;
}
/*获取全部url参数,并转换成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指定参数，返回url*/
delParamsUrl(url,name){
varbaseUrl=url.split('?')[0]+'?';
varquery=url.split('?')[1];
if(query.indexOf(name)>-1){
varobj={}
vararr=query.split("&");
for(vari=0;i0){
dom.scrollTop=restoreTop;
}
dom.focus();
dom.selectionStart=startPos+val.length;
dom.selectionEnd=startPos+val.length;
}else{
dom.value+=val;
dom.focus();
}
}
CSS1.pc-resetPC样式初始化
/*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:underlinedotted;
/*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:1pxdottedButtonText;
}
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:underlinedotted;
/*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:1pxdottedButtonText;
}
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,'OpenSans',Helvetica,Arial,sans-serif
}
/*禁止长按链接与图片弹出菜单*/
a,
img{
-webkit-touch-callout:none;
}
/*iosandroid去除自带阴影的样式*/
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内核和移动端*/
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:centercenter;
}
.bg-cover-all{
background-size:100%100%;
background-repeat:no-repeat;
background-position:centercenter;
}
以上都是经常用到的方法