H5 小代码(实时更新)

: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的文字渐变

原文地址:https://www.cnblogs.com/DangerousBaymax/p/9584614.html