准备整理一些常用的不常用的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访问你的网页了
localhost:8080
9、禁止将页面中的数字识别为电话号码
<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、根据当前地址确定交互使用的地址
function getUrl(uri){
return window.location.protocol+"//"+window.location.host+uri;
}
14、让一个元素根据屏幕高度占满一个整屏
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输入字数，以电话号码为例
<input type="number" placeholder="默认显示文字" oninput=if(value.length>11)value.slice(0,11)" class="_phone">
18、监听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、移动端禁止页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
21、移动端忽略Android平台中对邮箱的地址识别
<meta name="format-detection" content="email=no" />
22、移动端禁止ios长按时触发系统菜单，禁止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监听键盘回车事件 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、点击 到 释放之间的 状态 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，Firefox， Safari， 以及Edge， 和IE11可以工作，移动端基本都没问题，IE 重度开发者慎用
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、网页禁止选中文字
-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、移动端弹性滚动
传统pc端中，子容器高度超出父容器高度，通常使用overflow:auto可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型尤其是IOS机型不支持弹性滚动，从而在开发中制造了所谓的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实现表情显示
decodeURIComponent（）
网友评论