:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
↑ 自适应垂直居中
.clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; } .clearfix { zoom: 1; }
↑ 伪类清除浮动(直接将类名放入标签就可使用)
↑ 加载动画
var a = 123456789; a.toString().replace(/(d)(?=(?:d{3})+$)/g, '$1,');
↑ 给一段数字添加千分位逗号
var script = document.createElement('script'); script.src = "http://eruda.liriliri.io/eruda.min.js"; document.body.appendChild(script); script.onload = function() { eruda.init() }
↑ 移动端调试器
window.alert = function (message) { try { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentElement.appendChild(iframe); var alertFrame = window.frames[0]; var iwindow = alertFrame.window; if (iwindow == undefined) { iwindow = alertFrame.contentWindow; } iwindow.alert(message); iframe.parentNode.removeChild(iframe); } catch (exc) { return wAlert(message); } }
↑ 移动端H5 去除alert的头部标题
.user_list::-webkit-scrollbar {display:none}
↑ overflow:scroll 隐藏滚动条
var weixin = navigator.userAgent.toLowerCase(); if(weixin.match(/MicroMessenger/i) == "micromessenger") { alert("yep"); }
//判断当前使用是否为微信浏览器
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //判断是否为安卓
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否为ios
↑ 判断当前H5使用环境
.Discoloration_span { background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 140, 235, 1)), to(rgba(51, 255, 78, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .Discoloration_span { background-image: -webkit-linear-gradient(left, #008deb, #00ff4e 25%, #008deb 50%, #00ff4e 75%, #008deb); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 2s infinite linear; } } @-webkit-keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
↑ 字体颜色渐变+动画,class一粘即用,ie没兼容
jQuery.fn.shake = function(intShakes, intDistance, intDuration) { this.each(function() { var jqNode = $(this); jqNode.css({ position: 'relative' }); for(var x = 1; x <= intShakes; x++) { jqNode.animate({ left: (intDistance * -1) }, (((intDuration / intShakes) / 4))) .animate({ left: intDistance }, ((intDuration / intShakes) / 2)) .animate({ left: 0 }, (((intDuration / intShakes) / 4))); } }); return this; }
$(".ant_error").shake(2, 10, 400);
↑ 文字抖动
oninput = "value=value.replace(/[^d]/g,'')"
↑ input只能输入数字
display: flex;
flex-direction: row;
align-items: center;
↑ 自适应文字垂直居中
editTop: function(index) { if (index-1 == -1) { alert('no'); return; } this.test[index-1] = this.test.splice(index,1,this.test[index-1])[0]; }
↑ 数组元素上移
if(iframe.attachEvent) { iframe.attachEvent("onload", function() { // IE alert('ok'); }); } else { iframe.onload = function() { // 非IE alert('ok') }; }
↑ 判断ifram是否加载完成
var _this = this; $(document).mousedown(function(e) { //点击选择框以外时关闭 if($(e.target).closest(".menu_model").length == 0) { _this.areaIsShowMore = false; } });
↑ 点击选择框以外时关闭
changeURLArg(url, arg, arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_val; if(url.match(pattern)){ var tmp='/('+ arg+'=)([^&]*)/gi'; tmp=url.replace(eval(tmp),replaceText); return tmp; }else{ if(url.match('[?]')){ return url+'&'+replaceText; }else{ return url+'?'+replaceText; } } return url+' '+arg+' '+arg_val; } window.history.pushState(null, null, changeURLArg(window.location.href, "type", 1));
↑ 更改当前地址栏的某个参数并免加载在当前页面更换
<svg class="inst_store_svg_big"> <defs> <linearGradient id="grad" x1="0%" y1="50%" x2="50%" y2="90%" > <stop offset="0%" style="stop-color:#2F59F5; stop-opacity:1" /> <stop offset="100%" style="stop-color:#22B0FF; stop-opacity:1" /> </linearGradient> </defs> <text x="0" y="36" fill="url(#grad)"> 店铺管理 </text> </svg>
↑ 利用svg做到兼容IE的文字渐变