1、CSS一行文本超出隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2、CSS多行文本溢出隐藏
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
3、IOS手机容器滚动条滑动不顺畅
overflow: auto;
-webkit-overflow-scrolling: touch;
4、修改滚动条样式,隐藏div元素的滚动条
div::-webkit-scrollbar {
display:none;
}
5、解决img底边3像素的问题
img {
vertical-align: middle;
}
6、移动端去除input默认样式
input {
background: none;
outline: none;
border: none;
-webkit-appearance: none;
}
input : focus {
border: none;
}
7、解决ios audio / video 无法自动播放、循环播放的问题
//解决ios audio无法自动播放、循环的问题
var oVideo = document.getElementById('video');
var state = 0;
document.addEventListener('touchstar',function(){
if (state == 0){
oVideo.play();
state == 1;
}
},false);
document.addEventListener('weixinJSBridgeReady',function(){
oVideo.play();
},false);
//循环播放
oVideo.onended = function(){
oVideo.load();
oVideo.play();
}
8、contenteditable
contenteditable = "true"; //可以将标签编程可编辑状态。
<div contenteditable = "true"></div>
9、css中的 cale() 方法
这个属性能适应自适应的布局。
10、解析 get 参数
const l = {}
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(l)
通过 replace 方法获 url 中的参数键值对,可以快速解析get参数
11、解析连接URL
//创建a标签
const aEle = document.createElement('a');
//给a标签复制href属性
aEle.href = 'a.html';
//访问aEle中的属性
aEle.protocol;//获取协议
aEle.pathname;//获取path
aEle.origin;
aEle.host;
aEle.search;
创造 a 标签,给 a 标签复制 href 属性的方式,获取到协议,
pathname,origin等 location 对象傻瓜的属性
12、跨域的四种常见方式
jsonp是一种借助于 script 标签发送跨域请求的方式
CORS 跨域资源共享:需要在被请求的服务器相应的时候添加
Access-Control-Allow-Origin响应头,表示这个资源是否
允许指定域请求
nginx反向代理:可以不用目标服务器配合,不过需要搭建一个
中转nginx服务器,用于转发请求
nodejs 中间件代理跨域: node中间件实现跨域代理,原理大致
与nginx相同,通过启一个代理服务器,实现数据的转发,也可通过
设置cookieDomainRewrite参数修改响应头中cookie中域名,
实现当前域的cookie写入,方便接口登录认证