1.让图文不可复制
这点应该大家 都很熟悉了, 某些时候【你懂的】为了快捷搜索答案,可是打死也不让你复制
-webkit-user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
复制的时候自带版权信息
那有些网页为了尊重原创,复制的文本 都会被加上一段来源说明,是如何做到的呢?问的好! 等的就是你这个问题 -_- 。
大致思路:
答案区域监听copy事件,并阻止这个事件的默认行为。
获取选中的内容(window.getSelection())加上版权信息,然后设置到剪切板(clipboarddata.setData())。
2.盒子垂直水平居中
4种方法实现
1、定位盒子宽高已知,position:absolute;left:50%;top:50%;margin-left:-自身一半宽度;margin-top:-自身一半高度;
2、table-cell布局父级display:table-cell;vertical-align:middle; 子级margin:0auto;
3、定位+transform;适用于子盒子宽高不定时;(这里是本人常用方法)
position:relative/absolute;
/*top和left偏移各为50%*/
top:50%;
left:50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform:translate(-50%,-50%);注意这里启动了3D硬件加速哦会增加耗电量的(至于何是3D加速请看浏览器进程与线程篇)
4、flex布局
父级:
/*flex 布局*/
display:flex;
/*实现垂直居中*/
align-items:center;
/*实现水平居中*/
justify-content:center;
再加一种水平方向上居中:margin-left:50%;transform:translateX(-50%);
3.js判断设备来源
functiondeviceType(){
varua=navigator.userAgent;
varagent=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"];
for(vari=0;i
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize',function(){
deviceType();
})
微信的有些不太一样
functionisWeixin(){
varua=navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
returntrue;
}else{
returnfalse;
}
}
4.改变placeholder的字体颜色大小
其实这个方法也就在PC端可以,真机上屁用都没有,当时我就哭了。 但 还是贴出来吧
input::-webkit-input-placeholder{
/* WebKit browsers */
font-size:14px;
color:#333;
}
input::-moz-placeholder{
/* Mozilla Firefox 19+ */
font-size:14px;
color:#333;
}
input:-ms-input-placeholder{
/* Internet Explorer 10+ */
font-size:14px;
color:#333;
}
5.最快捷的数组求最大值
var arr=[1,5,1,7,5,9];
Math.max(...arr) // 9
6.更短的数组去重写法
[...newSet([2,"12",2,12,1,2,1,6,12,13,6])]
网友评论