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;
    }

↑  伪类清除浮动（直接将类名放入标签就可使用）

 

 

 https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html 

 ↑  加载动画

 

 

 

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是否加载完成

转载于:https://www.cnblogs.com/DangerousBaymax/p/9584614.html