準備整理一些常用的不常用的CSS代碼片段、方法，不定時添加。沒有順序，胡亂排序，就是這么隨意，-.-
1、首先移動端的viewport
<meta name="viewport" content="width=device-width,initial-scale=1,mininum-scale=1,maxinum-scale=1,user-scalable=no"/>
2、有的時候需要背景是要有透明度的，而上面的圖片是不需要透明度的，這樣就可能會造成給底層設置透明度的時候牽連到上層的元素，所以這種情況下就應該給底層元素設置rgba值
#box{ ? ? ? ? ?//底層
width: 300px;
height: 300px;
background-color: rgba(18,12,17,0.2);
}
#content{ ? ? ?//上層
width: 150px;
height: 150px;
padding: 25px auto;
background-color: red;
}
3、頁面后退
window.history.back();
4、禁止ios用戶和安卓用戶選中文字
.css{-webkit-user-select:none}
5、移動端字體
body{font-family:Helvetica;} ? ? //手機端是沒有微軟雅黑的
6、打電話
<a href="tel:10086">打電話</a>
7、手機號驗證
function checkMobile(s){
? ? ? var regu =/^1[3578][0-9]\d{8}/;
? ? ? var re = new RegExp(regu);
? ? ? if (re.test(s)) {
? ? ? ? ? ? return true;
? ? ? }else{
? ? ? ? ? ? return false;
? ? ? }
}
8、本地服務器，裝個nodejs，用npm安裝個包，終端輸入
npm install http-server -g
然后cd到工程目錄，并運行
http-server
你就可以通過localhost:8080訪問你的網(wǎng)頁了
localhost:8080
9、禁止將頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
10、修改表單輸入框placeholder的樣式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
11、移動端獲取鏈接信息
function getQueryString(name){
? ? ? var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
? ? ? var r = window.location.search.substr(1).match(reg);
? ? ? if (r != null) return unescape(r[2]);
? ? ? return null;
}
12、判斷客戶端陣營，IOS ?android，以及其他瀏覽器的判斷
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, ? /*IE內核*/
presto: u.indexOf('Presto') > -1, ? ?/*opera內核*/
webKit: u.indexOf('AppleWebKit') > -1, ? ?/*蘋果、谷歌內核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, ? ?/*火狐內核*/
mobile: !!u.match(/AppleWebKit.*Mobile.*/), ? ?/*是否為移動終端*/
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), ? ? /*ios終端*/
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, ? ?/*android終端或者uc瀏覽器*/
iPhone: u.indexOf('iPhone') > -1, ? ?/*是否為iPhone或者QQHD瀏覽器*/
iPad: u.indexOf('iPad') > -1, ? ?/*是否iPad*/
webApp: u.indexOf('Safari') == -1, ? ?/*是否web應該程序，沒有頭部與底部*/
souyue: u.indexOf('souyue') > -1,
superapp: u.indexOf('superapp') > -1,
weixin:u.toLowerCase().indexOf('micromessenger') > -1,
Safari:u.indexOf('Safari') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
13、根據(jù)當前地址確定交互使用的地址
function getUrl(uri){
? ? return window.location.protocol+"http://"+window.location.host+uri;
}
14、讓一個元素根據(jù)屏幕高度占滿一個整屏
html,body{
width:100%;
height:100%;
}
.box{ ? ? ?//要占滿整屏的元素
width:100%;
min-height:100%;
position:absolute;
top:0;
left:0;
background-color:black;
}
15、jsonp請求
$.ajax({
url:url,
dataType:"jsonp",
data:{
name:name,
phone:phone,
city:city
},
jsonp:"callback",
success:function(res){
console.log(res)
},
timeout:3000
})
16、兩種請求格式的post請求
$.ajax({
url:url,
type:"POST",
dataType:"json",
data:{
name:name,
phone:phone,
city:city
},
success:function(res){
console.log(res)
}
})
$.ajax({
url:url,
type:"POST",
dataType:"json",
data:JSON.stringify({
name:name,
phone:phone,
city:city
}),
success:function(res){
console.log(res)
}
})
17、限制input輸入字數(shù)，以電話號碼為例
<input type="number" placeholder="默認顯示文字" oninput=if(value.length>11)value.slice(0,11)" class="_phone">
18、監(jiān)聽input輸入的內容(沿用上一條)控制button是否可以點擊，以電話號碼為例
<button id="sub" disabled="disabled"></button>
$("._phone").bind("input porpertychange",function(){
var phoneuser = $("._phone").val();
var phoneRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
console.log(phoneRule.test(phoneuser))
if (phoneRule.test(phoneuser) == true) {
$("#sub").removeAttr("disabled")
// 正則驗證匹配，如果手機號正確開放按鈕可點擊
}else if(phoneRule.test(phoneuser) == false){
$("#sub").attr("disabled","disabled")
}
})
19、本地存儲的運用
localStorage.setItem("code",res.code)
localStorage.getItem("code")
20、移動端禁止頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
21、移動端忽略Android平臺中對郵箱的地址識別
<meta name="format-detection" content="email=no" />
22、移動端禁止ios長按時觸發(fā)系統(tǒng)菜單，禁止ios、Android長按下載圖片
.css {-webkit-touch-callout:none;}
23、webkit去除表單元素的默認樣式
.css {-webkit-appearance:none;}
24、去除字符串中的所有空格
var str = add.replace(/\s/ig,"");
25、不定寬高元素水平垂直居中
.parent{ ? //父元素
position:relative;? ? ? ??
}
.child{ ? //子元素
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;? ? ? ?
}
另一種只需在父級加上如下即可
display: flex;
justify-content: center;
align-items: center;
26、圖片預加載?
es5
es6
27、更改input的placeholder的顏色寫法
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:? ? #3bb4c1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:? ? #3bb4c1;
opacity:? 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:? ? #909;
opacity:? 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:? ? #3bb4c1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:? ? #3bb4c1;
}
28、不需要js監(jiān)聽鍵盤回車事件 ?css就可以勝任
29、驗證輸入內容的正確性 變換按鈕可否點擊
30、移動端字體rem的應用
31、獲取視口寬高
let w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
32、點擊 ?到 ?釋放之間的 狀態(tài) css
p:active{
background-color:red;
}
33、如何通過點擊定位到當前頁面/其他頁面制定位置
很簡單，如果是a標簽，只需將地址后面拼接想要定位到某個位置的標簽的id ? 例如 #test?
如果是其它標簽點擊定位 ?只需 ?設置 window.location.hash = '#test' 即可
34、文字兩端對齊
div{
margin:10px 0;
width:80px;
text-align-last: justify;
}
35、文字加波浪線? 這些技巧在當前版本的Chrome，F(xiàn)irefox， Safari， 以及Edge， 和IE11可以工作，移動端基本都沒問題，IE 重度開發(fā)者慎用
p{
? ? position: relative;
? ? width: 100px;
}
p:after{
? ? content: "";
? ? display: block;
? ? top: 100%;
? ? left: 0;
? ? width: 100%;
? ? height: 4px;
? ? background: linear-gradient(135deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),
? ? linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);
? ? background-size: 8px 8px;
}
36、圖片置灰
img{
width: 300px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
37、網(wǎng)頁禁止選中文字
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
38、移動端彈性滾動
傳統(tǒng)pc端中，子容器高度超出父容器高度，通常使用overflow:auto可出現(xiàn)滾動條拖動顯示溢出的內容，而移動web開發(fā)中，由于瀏覽器廠商的系統(tǒng)不同、版本不同，導致有部分機型尤其是IOS機型不支持彈性滾動，從而在開發(fā)中制造了所謂的BUG。
body{
-webkit-overflow-scrolling: touch;/* ios5+ */
}
ele{
overflow:auto;
}
39、時間戳格式化
function fmtDate(obj){
? ? var date =? new Date(obj);
? ? var y = 1900+date.getYear();
? ? var m = "0"+(date.getMonth()+1);
? ? var d = "0"+date.getDate();
? ? return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
}
40、動畫停留在最后一幀animate
animation-fill-mode: forwards;
animation-fill-mode:backwards;---停留在第一幀
41、解碼utf-8實現(xiàn)表情顯示
decodeURIComponent（）
