1.jquery的is(':visible')用法
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {//end()为结束前面处理函数,返回到最初的元素
//解释:用end()结束find(dd)的hide(),并将find(dt)作用到最初的#fap上
var answer = $(this).next();//next()为此元素的下一个元素,可以再加上.next()表示下下一个元素,以此类推
if (answer.is(':visible')) {//如果ANSWER 为可见,:visible是可见的意思,相关用法还有:hidden(隐藏),:first(第一个),:last(最后一个)
answer.slideUp();//隐藏
} else {
answer.slideDown();//显示
}
});
});
2.location.reload();重载页面
3.输入框控制剩余字数
function limitWord() {
wishText.on("input propertychange", function () {
var $this = $(this),
_val = $this.val(),
count = "";
if (_val.length >0){
if (_val.length > 100) {
$this.val(_val.substring(0, 100));
}
}
count = 100 - $this.val().length;
$("#text-count").html(count);
});
}//end func
4.borde-radius
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
//分别是水平方向和竖直方向半径，第二值省略的情况下，水平方向和竖直方向的半径相等。
//border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、
//IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器//内核添
//加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 Webkit 内核需要加上“-webkit”等，
//但是IE和Opera没有私有格式，因此为了最大程度的兼容浏览器，我们需要设置如下：
-webkit-border-radius: 10px 20px 30px;
-moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
//请将标准形式写在浏览器私有形式之后。
5.开启硬件加速
-webkit-transform: translate3d(0,0,0); /开启硬件加速/
-webkit-backface-visibility: hidden; /元素旋转时隐藏背面/
-webkit-transform-style: preserve-3d; /保留3D空间/
6.userAgent信息
var os = importOS();
function importOS() {
var userAgent = navigator.userAgent;
var os = {};
os.userAgent = userAgent;
os.android = userAgent.match(/(Android)\s+([\d.]+)/) || userAgent.match(/Silk-Accelerated/) ? true : false;
os.ipad = userAgent.match(/(iPad).*OS\s([\d_]+)/) ? true : false;
os.iphone = !os.ipad && userAgent.match(/(iPhone\sOS)\s([\d_]+)/) ? true : false;
os.ios = os.ipad || os.iphone;
os.wp = userAgent.match(/Windows Phone/) || userAgent.match(/IEMobile/) ? true : false;
os.supportsTouch = ((window.DocumentTouch && document instanceof window.DocumentTouch) || 'ontouchstart' in window);
if(os.ios) os.iosVer = parseInt(userAgent.match(/OS \d+_/)[0].match(/\d+/)[0]);
os.weixin = userAgent.match(/MicroMessenger/) ? true : false;
os.neteaseMusic = userAgent.match(/NeteaseMusic/) ? true : false;
if(os.weixin) {
var ver = userAgent.match(/MicroMessenger\/\d+.\d+.\d+/)[0].match(/\d+.\d+.\d+/)[0].split('.');
os.weixinVer = 0;
for(var i = 0; i < ver.length; i++) os.weixinVer += parseInt(ver[i]) * Math.pow(10, ver.length - i - 1);
} //edn if
os.wxApp= window.__wxjs_environment=='miniprogram' || userAgent.match(/miniprogram/) || userAgent.match(/miniProgram/) ? true : false;
os.weibo = userAgent.match(/Weibo/) || userAgent.match(/weibo/) ? true : false;
os.ali = userAgent.match(/AliApp/) ? true : false;
os.alipay = os.ali && userAgent.match(/Alipay/) ? true : false;
os.taobao = os.ali && userAgent.match(/WindVane/) ? true : false;
os.netease = userAgent.match(/NewsApp/) ? true : false;
os.facebook = userAgent.match(/(FB)/) ? true : false;
os.safari = os.ios && userAgent.match(/Safari/) ? true : false;
os.chrome = userAgent.match(/Chrome/) ? true : false;
os.firefox = userAgent.match(/Firefox/) ? true : false;
os.ie = document.documentMode;
os.edge = userAgent.match(/Edge/) ? true : false;
os.pc = !(os.android || os.ios || os.wp);
os.oppo = false;
os.oppoBrowser = false;
os.oppoApp = false;
os.oppoR15 = false;
if(os.ios) {
os.iphoneX = (screen.width == 375 && screen.height == 812) || (screen.width == 375 && window.innerHeight >= 635) || (window.innerWidth == 724 && window.innerHeight == 375) || (window.innerWidth == 375 && window.innerHeight == 724) ||(window.innerWidth == 808 && window.innerHeight == 414) || (window.innerWidth == 414 && window.innerHeight == 808) || (window.innerWidth == 812 && window.innerHeight == 343) || (window.innerWidth == 343 && window.innerHeight == 812);
os.iphone6Plus = (screen.width == 414 && screen.height == 736) || (screen.width == 414 && window.innerHeight >= 622);
os.iphoneXFull = os.iphoneX && (window.innerHeight>=700);
os.iphone6 = (screen.width == 375 && screen.height == 667) || (screen.width == 375 && window.innerHeight <= 603);
os.iphone5 = (screen.width == 320 && screen.height == 568) || (screen.width == 320 && window.innerHeight >= 460);
os.iphone4 = (screen.width == 320 && screen.height == 480) || (screen.width == 320 && window.innerHeight <= 450);
} //edn if
else if(os.android) {
requestAnimationFrame(function() {
os.screen159 = (screen.width == 360 && window.innerHeight < 540);
os.screen189 = (screen.width == 360 && window.innerHeight > 590) || (screen.width == 393 && window.innerHeight > 660);
});
os.miui = userAgent.match(/MI/) || userAgent.match(/Redmi/) ? true : false;
os.huawei = userAgent.match(/HUAWEI/) ? true : false;
os.oppo = userAgent.match(/OPPO/) ? true : false;
os.oppoBrowser= userAgent.match(/OppoBrowser/) ? true : false;
os.oppoApp= os.oppo && !os.oppoBrowser && !!window.JSCallJava;
os.oppoR15 = userAgent.match(/PAAM00/) || userAgent.match(/PAAT00/) || userAgent.match(/PACM00/) || userAgent.match(/PACT00/) ? true : false;
os.vivo = userAgent.match(/vivo/) ? true : false;
} //edn if
return os;
} //end func
7.判断是否是IE浏览器
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=b_version.split(";");
var browserIEeight = false;
if(version.length > 1){
var trim_Version = version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0") browserIEeight = true;
}
8.兼容苹果和安卓微信视频播放的代码
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
function _player(video) {
if (os.weixin) {
try {
WeixinJSBridge.invoke("getNetworkType", {}, function () {
video.play();
});
} //end try
catch (e) {
wx.ready(function () {
video.play();
});
} //edn catch
} else {
video.play();
}
}//edn func
9.部分meta
//H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
//忽略将页面中的数字识别为电话号码或者邮箱
<meta name="format-detection" content="telephone=no" />（iOS上会明显 有时候会把数字当成电话号码）
<meta name="format-detection" content="email=no" />
//忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
//去掉页面缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
10.webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）
11.部分兼容性样式
//input输入框
input[type="text"],input[type="date"],input[type="tel"],input[type="email"],input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象/
background: none;
font-size: 0.32rem;//必须设置字体,如果placeholder设置了字体大小,,输入框没有,则会造成纵向字体被截断,显示不完成
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/解决加入js后input框输入瞬间变白的现象/
}
//禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{display: none;/这样就可以用class自定义样式/}
//webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
//单行省略
.box{overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}
//多行省略
.box{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/第几行出现省略号/
/text-align:justify;不能和溢出隐藏的代码一起写，会有bug/
}
input框若是不想输入文字 只能读不能写可以加readonly属性
弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()
弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
12.数组合并去重排序
let arr1 = [1, 25, 2, 26, 1234, 6, 213];
let arr2 = [2, 6, 2134, 6, 31, 623];
let c = [...new Set([...arr1, ...arr2])].sort((a, b) => { return a - b;});
13.火狐浏览器mouserenter等事件的兼容
function checkHover(e, target) {
if (getEvent(e).type == "mouseenter") {
return !contains(target, getEvent(e).relatedTarget || getEvent(e).fromElement) && ! ((getEvent(e).relatedTarget || getEvent(e).fromElement) === target);
} else {
return !contains(target, getEvent(e).relatedTarget || getEvent(e).toElement) && !((getEvent(e).relatedTarget || getEvent(e).toElement) === target);
}
}
function getEvent(e) {
return e || window.event;
}
function contains(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode); }
else {
return !!(parentNode.compareDocumentPosition(childNode) & 16); }
}
//用法
$(selector).mouseenter(function (e) {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
if (checkHover(e, this)) {
//dosomething
}
});
14.预加载图片用PxLoader
//http://thinkpixellab.com/pxloader/
<script type="text/javascript" src="js/PxLoader.js"></script>
var loader = new PxLoader();
var loadPer = $('.load');
loader.addImage('images/common/turn_phone.png');
//实际加载进度
loader.addProgressListener(function(e) {
var per=Math.round(e.completedCount/e.totalCount*50);
loadPer.html(per+'%');
});
loader.addCompletionListener(function() {
loader=null;
//do something
});
loader.start();
15.微信浏览器H5页面软键盘关闭导致页面空缺的问题
//只有一个输入框的问题
$('input,textarea').on('blur',function(){
setTimeout(function(){
window.scrollTo(0, 0)
},100)
})
//多个输入框问题
$("input,textarea").on("blur",function(){
setTimeout(function(){
window.scrollTo(0,0);
},100)
}).on('focus',function(){
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var offsetTop = $(this).offset().top - (clientHeight / 4);
setTimeout(function(){
window.scrollTo(0,offsetTop);
},100)
})
15时间处理方法
//---------------------------------------------------------处理评论显示时间
function timestampFormat(timestamp) {
function zeroize(num) {
return (String(num).length == 1 ? '0' : '') + num;
}
var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
var Y = tmDate.getFullYear(), m = tmDate.getMonth() + 1, d = tmDate.getDate();
var H = tmDate.getHours(), i = tmDate.getMinutes(), s = tmDate.getSeconds();
if (timestampDiff < 60) {
// 一分钟以内
return "刚刚";
} else if (timestampDiff < 3600) {
// 一小时前之内
return Math.floor(timestampDiff / 60) + "分钟前";
} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
return '今天' + zeroize(H) + ':' + zeroize(i);
} else {
var newDate = new Date((curTimestamp - 86400) * 1000);
// 参数中的时间戳加一天转换成的日期对象
if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
return '昨天' + zeroize(H) + ':' + zeroize(i);
} else if (curDate.getFullYear() == Y) {
return zeroize(m) + '-' + zeroize(d) + ' ' + zeroize(H) + ':' + zeroize(i);
} else {
return Y + '-' + zeroize(m) + '-' + zeroize(d) + ' ' + zeroize(H) + ':' + zeroize(i);
}
}
}
网友评论