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

  • 相关阅读:
    源码分析八( hashmap工作原理)
    安装svn客户端后,代码不能提交
    zookeeper使用
    并发编程基础之ThreadLocal
    并发编程基础之生产者消费者模式
    并发编程基础之wait以及notify的用法
    进程间通信-字符串的传递
    arcgis ERROR:000824 该工具未获得许可
    使用BAT批处理执行sql语句的代码
    Reg命令使用详解 批处理操作注册表必备
  • 原文地址:https://www.cnblogs.com/DangerousBaymax/p/9584614.html
Copyright © 2020-2023  润新知