【整理】【精华】【实用】常用代码片段

你挚爱的强哥

已于 2023-06-28 14:32:32 修改

阅读量1.6w

点赞数 1

分类专栏： Sg.js框架 JavaScript&TypeScript 文章标签： javascript html

于 2019-10-28 12:49:52 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/100147875

版权

JavaScript&TypeScript 同时被 2 个专栏收录

233 篇文章 8 订阅

订阅专栏

Sg.js框架

183 篇文章 8 订阅

订阅专栏

//替代绑定模板数据________________________

    .replace(/{形参}/g, 实参);

    html += tpl
        .replace(/{形参}/g, 实参);

//for循环________________________

    var arr =
    for (var i = 0, len = arr.length; i < len; i++) {
        var a = arr[i];

    }


    var arr =, html = '', tpl = '{形参}';
    for (var i = 0, len = arr.length; i < len; i++) {
        var a = arr[i];
        html += tpl
            .replace(/{形参}/g, 实参)
            .replace(/{形参}/g, 实参);
    }
    DOM.innerHTML = html;

//Axios读取后台数据________________________

var params = {参数名: "参数值"};
this.$axios.get("接口路径", {params: params}).then(r => {
    r = r.data;
    if (r.status == "SUCCESS") {
        r = r.data;
        if (r) {/*这里写代码*/
            /* this.items = r;*/
        }
    } else {
        alert(r.message);
    }
}).catch(e => {
    console.log("【接口报错】", e);
});

//将数字转换为保留2位有效数字的百分数________________________
    var value = 0.0251;
    value = parseFloat((value * 100).toFixed(2)) + '%';
    alert(value);

/*验证用户名输入*/
    onkeyup = "this.value=this.value.replace(/\ |\　|[^\x00-\x80]/g,'')"

//自定义控制台显示样式________________________
    var msg = '提内内容';
    console.log('%c报错信息：','background:red;color:white;padding:5px;border-radius:5px;',msg);

//Vue常用读取后台接口方法________________________
    var params = {参数名: "参数值"};
    this.$axios.get("接口路径", {params: params}).then(r => {
        r = r.data;
        if (r.status == "SUCCESS") {
            r = r.data;
            if (r) {/*这里写代码*/
                /* this.items = r;*/
            }
        } else {
            console.log('%c报错信息', 'background:red;color:white;padding:5px;border-radius:5px;',r.message);
        }
    }).catch(e => {
        console.log("【接口报错】", e);
    });

    .shadow {
        /*穿透阴影效果兼容各种浏览器*/
        -webkit-filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, .5));
        filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, .5));
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=10, Color='#CCC')";
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=10, Color='#CCC')";
    }


    @media screen and (max-width: 1260px) {
        .div {
            /**适应1280x800的屏幕,除去浏览器滚动条宽度20px*/
        }
    }
    @media screen and (min-width: 1261px) and  (max-width: 1346px) {
        .div {
            /**适应1366x768的屏幕,除去浏览器滚动条宽度20px*/
        }
    }
    @media screen and (min-width: 1347px) and  (max-width: 1420px) {
        .div {
            /**适应1440x900的屏幕,除去浏览器滚动条宽度20px*/
        }
    }
    @media screen and (min-width: 1421px) and  (max-width: 1900px) {
        .div {
            /**适应1920x1080的屏幕,除去浏览器滚动条宽度20px*/
        }
    }
    @media screen and (min-width: 1901px) {
        .div {
            /**适应宽度超过1920的屏幕,除去浏览器滚动条宽度20px*/
        }
    }
    @media screen and (max-height: 668px) {
        .div {
            /**适应1366x768的屏幕,除去浏览器菜单栏、标签栏、状态栏以及系统任务栏高度100px*/
        }
    }
    @media screen and (min-height: 669px) and  (max-height: 800px) {
        .div {
            /**适应1440x900的屏幕,除去浏览器菜单栏、标签栏、状态栏以及系统任务栏高度100px*/
        }
    }
    @media screen and (min-height: 801px) and  (max-height: 980px) {
        .div {
            /**适应1920x1080的屏幕,除去浏览器菜单栏、标签栏、状态栏以及系统任务栏高度100px*/
        }
    }
    @media screen and (min-height: 981px) {
        .div {
            /**适应高度超过1080的屏幕,除去浏览器菜单栏、标签栏、状态栏以及系统任务栏高度100px*/
        }
    }

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width:768px)" href="css/手机.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-device-width:769px)" href="css/电脑.css">

 /**禁止拖拽保存图片*/function donotDrag() {
        window.ondragstart = window.ontouchmove = document.ondragstart = document.ontouchmove = function (e) {
            e.preventDefault();
            return false;
        };
    }

<!--获取外网IP-->
<!--<script src="http://ip.chinaz.com/getip.aspx"></script>-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script> document.write('您的外网IP：' + returnCitySN["cip"] + '<br>您的邮编：' + returnCitySN["cid"] + '<br>您所在城市：' + returnCitySN["cname"]);</script>

$(function(){

})

$().ready(function(){

})

$(document).ready(function(){

})

$(window).load(function(){

})

.animate-name {
    animation: animate-name .618s linear infinite;
    -moz-animation: animate-name .618s linear infinite; /** Firefox */
    -webkit-animation: animate-name .618s linear infinite; /** Safari 和 Chrome */
    -o-animation: animate-name .618s linear infinite; /** Opera */
}

@keyframes animate-name {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes animate-name {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes animate-name {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-ms-keyframes animate-name {
    0% {
        -ms-transform: rotate(0deg);
    }
    50% {
        -ms-transform: rotate(180deg);
    }
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-o-keyframes animate-name {
    0% {
        -o-transform: rotate(0deg);
    }
    50% {
        -o-transform: rotate(180deg);
    }
    100% {
        -o-transform: rotate(360deg);
    }
}

    div {
        -webkit-transform: translateY(-5px); /* for Chrome || Safari */
        -moz-transform: translateY(-5px); /* for Firefox */
        -ms-transform: translateY(-5px); /* for IE */
        -o-transform: translateY(-5px); /* for Opera */
        transform: translateY(-5px);
    }

    *:not([class*=layui-layer]), :before, :after, :visited, :focus, :focus-within, :checked {
        transition: .382s; /** IE 9 */
        -moz-transition: .382s; /** Firefox 4 */
        -webkit-transition: .382s; /** Safari 和 Chrome */
        -o-transition: .382s;
        /** Opera */
        -khtml-transition: .382s; /** only Safari */
    }

div {
        transition: .382s;
        -moz-transition: .382s;
        -webkit-transition: .382s;
        -o-transition: .382s;
        -khtml-transition: .382s;
    }

    /*自定义选择内容样式*/
    ::selection {
        background: rgba(82, 170, 255, .3);
        color: #2366bd;
    }

    ::-moz-selection {
        background: rgba(82, 170, 255, .3);
        color: #2366bd;
    }

    ::-webkit-selection {
        background: rgba(82, 170, 255, .3);
        color: #2366bd;
    }

/*滚动条轨道*/
    ::-webkit-scrollbar {
        width: 8px;
        background: rgba(255, 255, 255, 0.2);
    }

    /*滚动条滑块*/
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.2);
    }

    /*移入滑块*/
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    var url = "http://www.shuzhiqiang.com/api";
    var data = {start: 0, count: 1};
    $.ajax({
        type: "POST", url: url, data: data, success: function (data) {
            if (data.code == 200) {
                console.log(data);
                document.write(JSON.stringify(data));
            }
            else {
                console.log("报错", data);
            }
        }, error: function (e) {
            console.log(e);
        }
    });

    $.ajax({
        type: "GET", url: "http://www.shuzhiqiang.com/api", data: {username: "admin", password: "123456"}, success: function (data) {
            document.write(JSON.stringify(data));
        }, error: function (e) {
            console.log(e);
        }
    })

/**jsonp方式获取数据*/
    $.ajax({
        type: "POST",
        url: "http://www.shuzhiqiang.com/api",
        data: {method: "originateCollectByDay", startDate: "2017-05-01", endDate: "2017-07-01"},
        dataType: "jsonp",
        jsonp: 'callback',
        success: function (data) {
            alert(data[0].originate);
        }
    })

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $.get("http://www.w3school.com.cn/example/jquery/demo_test.asp&id=1",
        function (data, status) {
            alert("数据：" + data + "\n状态：" + status);
        });
</script>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $.post("http://www.w3school.com.cn/example/jquery/demo_test.asp", {name: "Donald Duck", city: "Duckburg"}, function (data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });
</script>

    /**postJSON自定义方法*/
    var postJSON = function (url, data, success) {
        typeof  data == "function" && (success = data, data = {});
        typeof  data == "undefined" || typeof data == "null" && (success = function () {
        }, data = {});
        return $.ajax({
            type: "POST",
            contentType:
                "application/x-www-form-urlencoded;application/json; charset=utf-8",
            /**这个里面的application/x-www-form-urlencoded如果去掉，Tomcat的HttpServletRequest类request.getParameter(name)将无法获取数据*/ dataType: "jsonp",
            jsonp: "callback",
            url: url,
            data: data,
            success:
            success
        });
    };
    /**调用postJSON*/$.postJSON("http://www.shuzhiqiang.com/api", {username: "admin", password: "123456"}, function (data) {
        console.log(data);
    });

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    /**getJSON方法：jQuery读取jsonp格式数据，在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。*/
    $.getJSON("http://www.shuzhiqiang.com/api?parameter=1" + "&callback=?", function (data) {
        console.log(data);
    }).success(function () { /**alert("success");*/
    }).error(function () { /**alert("error");*/
    }).complete(function () { /**alert("complete");*/
    }).done(function () { /**从jQuery 1.8开始不支持success回调函数*/
        /**alert('成功');*/
    }).fail(function () {/**从jQuery 1.8开始不支持error回调函数*/
        /**alert('失败')*/
    }).always(function () { /**从jQuery 1.8开始不支持complete回调函数*/
        /**alert('完成');*/
    });
</script>

/*径向渐变合集----------------------------------------------------------------*/

/* closest-side */
    .closest-side .circle {
        background-image: -webkit-radial-gradient(closest-side circle at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(closest-side circle at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(closest-side circle at 50% 90%, transparent, black);
        background-image: radial-gradient(closest-side circle at 50% 90%, transparent, black);
    }

    .closest-side .ellipse {
        background-image: -webkit-radial-gradient(closest-side ellipse at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(closest-side ellipse at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(closest-side ellipse at 50% 90%, transparent, black);
        background-image: radial-gradient(closest-side ellipse at 50% 90%, transparent, black);
    }

    /* closest-corner */
    .closest-corner .circle {
        background-image: -webkit-radial-gradient(closest-corner circle at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(closest-corner circle at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(closest-corner circle at 50% 90%, transparent, black);
        background-image: radial-gradient(closest-corner circle at 50% 90%, transparent, black);
    }

    .closest-corner .ellipse {
        background-image: -webkit-radial-gradient(closest-corner at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(closest-corner at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(closest-corner at 50% 90%, transparent, black);
        background-image: radial-gradient(closest-corner ellipse at 50% 90%, transparent, black);
    }

    /* farthest-side */
    .farthest-side .circle {
        background-image: -webkit-radial-gradient(farthest-side circle at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(farthest-side circle at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(farthest-side circle at 50% 90%, transparent, black);
        background-image: radial-gradient(farthest-side circle at 50% 90%, transparent, black);
    }

    .farthest-side .ellipse {
        background-image: -webkit-radial-gradient(farthest-side ellipse at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(farthest-side ellipse at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(farthest-side ellipse at 50% 90%, transparent, black);
        background-image: radial-gradient(farthest-side ellipse at 50% 90%, transparent, black);
    }

    /* farthest-corner */
    .farthest-corner .circle {
        background-image: -webkit-radial-gradient(farthest-corner circle at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(farthest-corner circle at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(farthest-corner circle at 50% 90%, transparent, black);
        background-image: radial-gradient(farthest-corner circle at 50% 90%, transparent, black);
    }

    .farthest-corner .ellipse {
        background-image: -webkit-radial-gradient(farthest-corner ellipse at 50% 90%, transparent, black);
        background-image: -o-radial-gradient(farthest-corner ellipse at 50% 90%, transparent, black);
        background-image: -moz-radial-gradient(farthest-corner ellipse at 50% 90%, transparent, black);
        background-image: radial-gradient(farthest-corner ellipse at 50% 90%, transparent, black);
    }


<script>
    /**仿ios弹窗样式*/
    function showIosLayer(content, time, shade, shadeClose, completeFun, getIndex) {
        time = time == undefined || time == null ? 3 : time;
        shade || (shade = [.4, 'black']);
        completeFun = completeFun || function () {
        };
        var index = layer.msg(content, {time: time * 1000, shade: shade, shadeClose: Boolean(shadeClose), skin: 'SG-layer-skin'}, completeFun);
        getIndex && getIndex(index);
        /**设置快捷键*/ document.onkeyup = function (e) {
            var k = e.keyCode || e.which || e.charCode;
            /**独立键*/
            if (k == 37 || k == 38 || k == 27 || k == 8) { /*按下 ← ↑ Esc <BACKSAPCE 的时候执行*/
                index && top.layer.close(index);
            }
        };
    }

    /**防止关闭模态窗体*/
    function showForbidVisitAlert() {
        showIosLayer("舒工温馨提示您：<br>该页面暂不支持移动端访问，请用电脑访问😊", 0, [1, "white"], false);
    }
</script>

<style>
    /**SG-layer-skin.css的样式为：*/
    body .layui-layer-msg {
        width: 75%;
        height: auto;
        font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial';
        text-align: justify;
        color: dimgray;
        border-radius: 1em;
        border: none;
        box-shadow: 0 1em 2.5em rgba(0, 0, 0, .382);
        background: white;
    }
</style>

var browser = {
        /**浏览器可视区域宽度高度（不含纵向滚动条宽度和水平滚动条高度）*/ visibleWidth: function () {
            return document.documentElement.clientWidth || document.body.clientWidth
        }, visibleHeight: function () {
            return document.documentElement.clientHeight || document.body.clientHeight
        }, update: function () {
            /**升级浏览器*/ var s = this.version(), b = s.browser, v = s.version.split('.')[0], a = function () {
                alert('朋友！\n您还在用大家都抛弃了的浏览器版本吗？\n淘宝都不支持这个浏览器了！\n还是点击确定更新下吧！\n与世界接轨很有必要！\n祝您早日富可敌国！');
                location.replace("https://down.360safe.com/se/360se_setup.exe");
            };
            b == "chrome" && v < 55 && a();
            b == "firefox" && v < 60 && a();
            b == "msie" && v < 10 && a();
            b == "opera" && v < 55 && a();
            /*document.write(b + "的版本是" + s.version);*/
        }, version: function () {
            /**获取浏览器版本*/ var s = {}, m = navigator.userAgent.toLocaleLowerCase().match(/(msie|firefox|chrome|opera|version).*?([\d.]+)/);
            s.browser = m[1].replace(/version/, "'safari"), s.version = m[2];
            return s;
        }
    };
    /*测试用例*/
    broswer.update();

<!--热区-->
<img src="https://www.baidu.com/img/bd_logo1.png" usemap="#hot-area-map">
<!--如果不希望出现点击的边框热区，去掉usemap的#-->
<map name="hot-area-map">
    <area shape="rect" coords="20,20,80,80" href="#rect">
    <area shape="circle" coords="200,50,50" href="#circle">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly">
</map>

<!--百度获取地理信息坐标-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=3k1MmoM9pAO0SMrlqe9qKhICi0cbo2TE"></script>
<!--上面这个百度APIkey密钥是用百度ID：155****3322注册的，如果要更改密钥权限找舒工！-->
<script>
    var baiduGEO = {
        getPosition: function (success, error) {
            var g = new BMap.Geolocation();
            /*开启SDK辅助定位*/
            g.enableSDKLocation();
            g.getCurrentPosition(function (p) { /*p.point.lng|p.point.lat*/
                this.getStatus() == BMAP_STATUS_SUCCESS ? success(p) : (error && error(p, this.getStatus()));
            });
        }, getDistance: function (from, to) {
            return new BMap.Map().getDistance(new BMap.Point(from.lng, from.lat), new BMap.Point(to.lng, to.lat));
        }
    };
    /*测试用例*/
    console.log(baiduGEO.getDistance({lng: 116.127214, lat: 24.306139}, {lng: 116.127443, lat: 24.306204}));
</script>

<!--腾讯获取地理信息坐标-->
<script src="https://apis.map.qq.com/tools/geolocation/min?key=6NMBZ-E4YL6-XF4SR-M75G4-FXCHE-FQBLL&referer=myapp"></script>
<script src="https://map.qq.com/api/js?v=2.exp&key=6NMBZ-E4YL6-XF4SR-M75G4-FXCHE-FQBLL"></script>
<!--上面这个腾讯APIkey密钥是腾讯ID：155****3322注册的，如果要更改密钥权限找舒工！-->
<script>
    var tencentGEO = {
        _key: '6NMBZ-E4YL6-XF4SR-M75G4-FXCHE-FQBLL', /*如果不能使用去https://lbs.qq.com/console/setting.html?key=6NMBZ-E4YL6-XF4SR-M75G4-FXCHE-FQBLL设置绑定IP白名单*/
        getPosition: function (success, error, timeout) { /*lng,lat,province,city,district|区,addr|最近地址名称,nation|国家,adcode|邮政编码,accuracy|位置误差（米）*/
            new qq.maps.Geolocation(this._key, "myapp").getLocation(success, error, {timeout: timeout || 10 * 1000});
            /*设置定位超时10秒钟 }*/
        },
        getDistance: function (from, to, success) {
            $.getJSON('https://apis.map.qq.com/ws/distance/v1/?mode=driving&output=jsonp&callback=?&from=' + from.lat + ',' + from.lng + '&to=' + to.lat + ',' + to.lng + '&key=' + this._key, function (d) {
                success(d.result.elements[0].distance);
            });
        }
    };
    /*测试用例*/
    tencentGEO.getDistance({lng: 116.127214, lat: 24.306139}, {lng: 116.127443, lat: 24.306204}, function (d) {
        console.log(d);
    });
</script>

微信浏览器的UserAgent


Mozilla/5.0 (Linux; Android 8.0; MI 6 Build/OPR1.170623.027; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/044203 Mobile Safari/537.36 MicroMessenger/6.6.7.1321(0x26060739) NetType/WIFI Language/zh_CN


    /**原生JS实现jQuery的ready方法*/ function ready(fn) {
        var d = document;
        if (d.addEventListener) {/*标准浏览器*/
            d.addEventListener('DOMContentLoaded', function () {/*注销事件，避免反复触发*/
                d.removeEventListener('DOMContentLoaded', arguments.callee, false);
                /*执行函数*/
                fn();
            }, false);
        } else if (d.attachEvent) {/*IE浏览器*/
            d.attachEvent('onreadystatechange', function () {
                if (d.readyState == 'complete') {
                    d.detachEvent('onreadystatechange', arguments.callee);
                    /*执行函数*/
                    fn();
                }
            });
        }
    }

    /*测试用例*/
    ready(function () {
        alert("在加载完DOM（不包含图片等非文字媒体文件）之后，onload之前执行！")
    })


    var scroll = {
        id: null, scrollTop: function () {
            return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
        }, width: function () {
            var d = document.createElement('div'), s = {width: '100px', height: '100px', overflowY: 'scroll'}, i, w;
            for (i in s) d.style[i] = s[i];
            document.body.append(d), w = d.offsetWidth - d.clientWidth, d.remove();
            return w;
        }, twTo: function (y) { /*<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"><\/script>*/
            /* TweenMax.to("html", 1, {scrollTop: y, ease: Strong.easeOut});*/
            $("html").stop().animate({scrollTop: y});
        }, to: function (y) {
            function stopScroll() {
                scroll.id && clearInterval(scroll.id);
            }

            stopScroll();
            scroll.id = setInterval(function () {
                moveScroll(y);
            }, 1);

            function moveScroll(Y, R) {
                Y || (Y = 0);
                R || (R = .0382);
                var st = scroll.scrollTop();
                st += (Y - st) * R;
                window.scrollTo(0, st);
                st == Y && stopScroll();
            }

            window.onmousewheel = document.onmousewheel = document.onkeyup = window.onkeyup = function () {
                stopScroll();
            };
        }
    };
    /*测试用例*/
    scroll.to(2000);

<!--邮箱后缀自动补全功能：可以多个邮箱输入框遍历（datalist必须要紧接在inut后面）-->
<input list="inputDropDownList" placeholder="请输入邮箱"/>
<datalist id="inputDropDownList"></datalist>

<script type="text/javascript">
    function inputMailList(sel) {
        var mails = ["@qq.com", "@sina.com", "@163.com", "@126.com", "@yahoo.com.cn", "@gmail.com", "@sohu.com"];
        sel = typeof sel == "string" ? document.querySelectorAll(sel) : [sel];
        var arr = sel;
        for (var i in arr) {
            var a = arr[i];
            a.oninput = a.onchange = function () {
                var key = this.value, html = "";
                key = key.indexOf("@") > -1 ? key.slice(0, key.indexOf("@")) : key;
                for (var k in mails) {
                    html += '<option value="' + key + mails[k] + '"></option>';
                }
                (this.nextElementSibling || this.nextSibling).innerHTML = (html);
            }
        }
    }

    inputMailList("input");
</script>


    /**原生Ajax*/ function ajax() {
        var a = arguments[0];
        var d = {
            t: a.type || "GET", u: a.url || "", a: a.async || "true", d: a.data || null, dt: a.dataType || "text", ct: a.contentType || "application/x-www-form-urlencoded", b: a.beforeSend || function () {
            }, s: a.success || function () {
            }, e: a.error || function () {
            }
        };
        d.b();
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.responseType = d.dt;
        xhr.open(d.t, d.u, d.a);
        xhr.setRequestHeader("Content-Type", d.ct);
        xhr.send(JSON.stringify(d.d).replace(/\t|\n|\r|\"|\{|\}/g, "").replace(/,/g, "&").replace(/:/g, "="));
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    d.s(xhr.response)
                } else {
                    d.e()
                }
            }
        }
    };
    /*测试用例*/
    ajax({
        type: "POST", url: "http://www.shuzhiqiang.com/api", dataType: "json", data: {start: 0, count: 5}, beforeSend: function (e) {
            console.log("开始加载…");
        }, success: function (msg) {
            console.log(msg)
        }, error: function (e) {
            console.log(e)
        }
    })


    /**路径修复：因更换服务器图片路径指向错误的问题*/ var pathRepair = {
        __r: function (p, o, n) {
            return p.replace(new RegExp(o, "g"), n);
        }, __getImgSrc: function (html) {
            var imgReg = /<img.*?(?:>|\/>)/gi, srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i, arr = html.match(imgReg), srcs = [];
            if (arr) {
                for (var i = 0; i < arr.length; i++) {
                    var src = arr[i].match(srcReg), src = src[1];
                    src && srcs.push(src)
                }
                return srcs;
            } else {
                return null;
            }
        }, __addSlash: function (a) {
            return (a.indexOf("/") == 0 ? "" : "/") + a;
        }, replace: function (path, oldUrlOrArr, newUrl) {
            oldUrlOrArr instanceof Array || (oldUrlOrArr = [oldUrlOrArr]);
            var arr = oldUrlOrArr;
            for (var i in arr) var a = arr[i], path = this.__r(path, a, newUrl);
            return path;
        }, img: function (imgUrl, oldUrl, newUrl, http) {
            if (!imgUrl) return;
            http || (http = 'http://'), imgUrl.indexOf(http) == -1 && (imgUrl = http + newUrl + this.__addSlash(imgUrl));
            return pathRepair.replace(imgUrl, oldUrl, newUrl);
        }, detail: function (html, oldUrlOrArr, newUrl, http) {
            if (!html) return;
            http || (http = 'http://');
            var arr = this.__getImgSrc(html), r = [];
            if (arr) {
                for (var i = 0, len = arr.length; i < len; i++) {
                    var a = arr[i];
                    a.indexOf(http) == -1 && (a = http + newUrl + this.__addSlash(a));
                    var b = this.replace(a, oldUrlOrArr, newUrl);
                    r[i] = b;
                }
                for (i = 0; i < len; i++) {
                    var a = arr[i], b = r[i], html = this.__r(html, a, b);
                }
            }
            return html;
        }
    };
    /*测试用例*/
    console.log(pathRepair.detail(html, "121.40.143.145", "www.shuzhiqiang.com", "http://"));


    /**选项卡切换效果神器1.0*/ var chooseBar = {
        _ac: "active", _bar: null, _con: null, _fun: null, __reset: function () {
            this._bar.forEach(function (e) {
                e.className = e.className.replace(new RegExp(chooseBar._ac, "g"), "").replace(/  /g, "");
                e.style.cursor = "pointer";
            });
            this._con && (this._con.forEach(function (e) {
                e.style.display = "none";
            }));
        }, __active: function (i) {
            i || (i = 0), this.__reset();
            var b = this._bar[i];
            b.className += " " + this._ac, b.style.cursor = "default";
            this._con && (this._con[i].style.display = "block");
            this._fun && this._fun(i);
        }, click: function (obj) {
            this.init(obj, 'click');
        }, over: function (obj) {
            this.init(obj, 'over');
        }, init: function (obj, type) {
            /**obj的格式说明： { bar:[（必填）按钮的id or class（数组）], con:[（必填）显示内容的id or class（数组）], } 特别说明：在选项卡上面加入.active{ 高亮显示样式 }; */ this._bar = obj.bar;
            if (typeof obj.con == "function") {
                this._fun = obj.con;
            } else {
                this._con = obj.con;
            }
            this.__active();
            var event = 'onclick';
            switch (type) {
                case 'click':
                    event = 'onclick';
                    break;
                case 'over':
                    event = 'onmouseover';
                    break;
            }
            for (var i = 0, len = this._bar.length; i < len; i++) {
                var a = this._bar[i];
                a.index = i;
                a[event] = function () {
                    chooseBar.__active(this.index);
                }
            }
        }
    };
    /*测试用例*//*点击后显示隐藏对应div*//* chooseBar.click({bar: document.querySelectorAll("#bar li"), con: document.querySelectorAll("#con li")}); 点击触发事件*/
    chooseBar.click({
        bar: document.querySelectorAll(".menu li"), con: function (i) {
            alert(i)
        }
    });

var ID = {
        __valid: function (id) {
            return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(id);
        }, getBirthDate: function (cardId) {
            if (!this.__valid(cardId)) return console.log("身份证不合法");
            return cardId.substr(6, 4) + "-" + this.getBirthday(cardId);
        }, getBirthday: function (cardId) {
            if (!this.__valid(cardId)) return console.log("身份证不合法");
            return cardId.substr(10, 2) + "-" + cardId.substr(12, 2);
        }, getSex: function (cardId) {
            if (!this.__valid(cardId)) return console.log("身份证不合法");
            return parseInt(cardId.substr(16, 1)) % 2 == 1 ? "男" : "女";
        }, getAge: function (cardId) {
            if (!this.__valid(cardId)) return console.log("身份证不合法");
            var age = new Date().getFullYear() - cardId.substr(6, 4);
            new Date(new Date().getFullYear() + "-" + this.getBirthday(cardId)) > new Date() && age--;
            return age;
        }
    };

    /**复杂url?data=参数自动获取以及设置*/ var ud = {
        get: function (data) {
            return JSON.parse(hash.getQueryString(data || "data"));
        }, set: function (data, keyName) {
            return "?" + (keyName || "data") + "=" + encodeURIComponent(JSON.stringify(data));
        },
    };

    /**该网页所在的域名目录必须是： 1、设置网页授权域名，否则无法获取openid（微信公众平台后台“右上角头像→功能设置”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL） 2、设置JSAPI支付授权目录，否则无法唤起微信支付窗口（微信支付商户平台“产品中心→开发配置→支付配置→JSAPI支付授权目录”添加具体指向该页面所在域名目录）*/ var getOpenIdUrl = "http://192.168.1.108:9999/wechat/getAccessTokenAndOpenId";
    /*获取openid*/
    var createOrderUrl = "http://192.168.1.108:9999/wepay/createOrder";
    /*创建微信预支付订单*/
    var notifyUrl = "http://www.sg.com:9999/wepay/notifyUrl";
    /*通知url必须为直接可访问的url，不能携带参数。示例：notify_url（https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7&index=8）*/
    /**微信支付JSAPI唤起支付窗口*/ var wePay = {
        _api: createOrderUrl, _data: {}, __onBridgeReady: function () {
            var d = this._data;
            WeixinJSBridge.invoke('getBrandWCPayRequest', {appId: d.appId, timeStamp: d.timeStamp, nonceStr: d.nonceStr, package: d.package, signType: d.signType, paySign: d.paySign}, function (d) {
                alert("微信返回信息：" + JSON.stringify(d, null, 4));
                if (d.err_msg == "get_brand_wcpay_request:ok") {
                    alert("支付成功!");
                    /*显示支付成功结果页*/
                    location.replace("paySuccessResult.html?body=&price=&out_trade_no=" + d.out_trade_no + "&timeStamp=" + d.timeStamp);
                } else if (d.err_msg == "get_brand_wcpay_request:cancel") {
                    alert("支付取消!");
                    history.go(-1);
                } else if (d.err_msg == "get_brand_wcpay_request:fail") {
                    alert("支付失败!");
                    history.go(-1);
                }
            });
        }, __showWePayDialog: function (data) {
            this._data = data.data;
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', this.__onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', this.__onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', this.__onBridgeReady);
                }
            } else {
                this.__onBridgeReady();
            }
        }, pay: function (obj) {
            /**舒工自定义调用Ajax 2.0.2*/ $g.ajax({
                post: {url: this._api, data: {body: obj.body, out_trade_no: obj.out_trade_no, total_fee: obj.total_fee, notify_url: obj.notify_url, openid: obj.openid}, noToken: true}, get: {
                    success: function (d) {
                        if (d.code == 200) {
                            wePay.__showWePayDialog(d);
                        } else {
                            alert(JSON.stringify(d, null, 4));
                        }
                    }, error: function (d) {
                        console.log("【报错】" + JSON.stringify(d, null, 4));
                    },
                }
            });
        }
    };
    /*获取code-------------------------------------------------------------------------*/
    var code = hash.getQueryString("code"), openId;
    alert("CODE：" + code);
    /*获取openid-------------------------------------------------------------------------*/
    /**舒工自定义调用Ajax 2.0.2*/ $g.ajax({
        post: {url: getOpenIdUrl, data: {code: code}, noToken: true}, get: {
            success: function (d) {/* alert(JSON.stringify(d, null, 4));*/
                openId = d.data.openid;
                alert("openId：" + openId);
            }, error: function (d) {
                alert(JSON.stringify(d, null, 4));
            },
        }
    });
    /*唤起支付-------------------------------------------------------------------------*/
    var obj = {body: "产品名称", out_trade_no: "SG_order_" + Number(new Date()), total_fee: 1, notify_url: notifyUrl, /* openid: "o07LNv8MhotwnZoWmDfx0oK5ZYik"*/};
    document.querySelector("button").onclick = function () {
        obj.openid = openId;
        wePay.pay(obj);
    }
    /*-------------------------------------------------------------------------*/

var userAgent = {
        _ua: navigator.userAgent, _ual: navigator.userAgent.toLocaleLowerCase(), /**判断是否为PC电脑端浏览器*/ isPC: function () {
            var ua = this._ual;
            return ua.indexOf("pad") == -1 && ua.indexOf("mobile") == -1;
        }, /**判断是否为手机端*/ isPhone: function () {
            var ua = this._ual;
            return ua.indexOf("pad") == -1 && ua.indexOf("mobile") > -1;
        }, /**判断是否为平板电脑*/ isPad: function () {
            var ua = this._ua, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua);
            return /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua));
        }, /**判断是否是微信浏览器*/ isWeixinBrowser: function () {
            return this._ual.indexOf("micromessenger") != -1;
        }, /**监听是否为苹果电脑自带浏览器safari*/ safariBrowser: function (func) {
            func || (func = function () {
                alert("请不要使用safari这种低端浏览器，我唾弃你的品位！点击关闭，让我们一起安装高大上的谷歌浏览器吧，祝你早日富可敌国！么么哒~😊");
                window.opener = null;
                /*为了不出现提示框*/
                window.close();
                /*关闭窗口*/
                window.open("http://shuzhiqiang.com/files/googlechrome.dmg");
            });
            var isSafari = /Safari/.test(this._ua) && !/Chrome/.test(this._ua);
            if (isSafari) func();
        }, /**移动端浏览器跳转*/ mobileBrowserRedirect: function (mobilePageOrFunc, webPageOrFunc) {
            var ua = this._ual, ipad = ua.indexOf("ipad") > -1, iphone = ua.indexOf("iphone os") > -1, midp = ua.indexOf("midp") > -1, uc7 = ua.indexOf("rv:1.2.3.4") > -1, uc = ua.indexOf("ucweb") > -1, andriod = ua.indexOf("android") > -1,
                ce = ua.indexOf("windows ce") > -1, wm = ua.indexOf("windows mobile") > -1, wx = ua.indexOf("micromessenger") > -1, isMobile = ipad || iphone || midp || uc7 || uc || andriod || ce || wm || wx;
            if (isMobile) {
                document.querySelector("html").style.display = "none";
                typeof mobilePageOrFunc == "string" && location.replace(mobilePageOrFunc);
                typeof mobilePageOrFunc == "function" && mobilePageOrFunc();
            } else {
                typeof webPageOrFunc == "string" && location.replace(webPageOrFunc);
                typeof webPageOrFunc == "function" && webPageOrFunc();
            }
            return isMobile;
            /*测试用例*/
            /*mobileBrowserRedirect(function () {alert("该页面暂不支持移动端访问，请用电脑访问😊")})*/
        }, /**判断是移动端浏览器*/ isMobilePhoneBrowser: function (mobilePhoneCallback, padCallback, otherMobileCallback) {
            var ua = this._ua;
            if (/AppleWebKit.*mobile/i.test(ua) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(ua))) {
                if (location.href.indexOf("?mobile") < 0) {
                    try {
                        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua)) {
                            mobilePhoneCallback ? mobilePhoneCallback() : location.replace("手机页面.html");
                            return true;
                        } else if (/iPad/i.test(ua)) {
                            padCallback ? padCallback() : location.replace("平板页面.html");
                            return true;
                        } else {
                            otherMobileCallback ? otherMobileCallback() : location.replace("其他移动端页面.html");
                            return true;
                        }
                    } catch (e) {
                        console.log(e);
                    }
                }
            }
            return false;
        }, /**判断是IOS系统*/ isIOS: function () {
            var u = this._ua, app = navigator.appVersion;
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            /*ios终端*/
            return isIOS;
        }, /**判断是Android系统*/ isAndroid: function () {
            var u = this._ua, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
            /*g*/
            return isAndroid
        },
    }

var swiper = {
        _swiper: null, _swiperScroll: null, __scrollTop: function () {
            top.scrollTo(0, 0);
            window.scrollTo(0, 0);
        }, init: function (type, sel) {
            this.__scrollTop();
            type || (type = 0);
            var effect = "slide";
            /*默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。*/
            switch (type) {
                case 0:
                    effect = "slide";
                    break;
                case 1:
                    effect = "fade";
                    break;
                case 2:
                    effect = "cube";
                    break;
                case 3:
                    effect = "coverflow";
                    break;
                case 4:
                    effect = "flip";
                    break;
                case 5:
                    break;
                default:
                    effect = "slide";
            }
            this._swiper = new Swiper(sel || '.swiper-container', {
                autoplay: true,
                speed: 500,
                effect: effect,
                loop: true,
                grabCursor: true,
                cubeEffect: {shadow: false, slideShadows: false, /*去掉coverflow下的背景阴影*/},
                coverflowEffect: {rotate: 50, stretch: 300, depth: 300, modifier: 1, slideShadows: false, /*去掉coverflow下的背景阴影*/},
                flipEffect: {slideShadows: false, /*去掉coverflow下的背景阴影*/},
                pagination: {el: '.swiper-pagination',},
                navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',},
            });
        }, initScroll: function (sel) {
            this.__scrollTop();
            this._swiperScroll = new Swiper(sel || '.swiper-scroll-container', {direction: 'vertical', slidesPerView: 'auto', freeMode: true, mousewheel: true, scrollbar: {el: '.swiper-scrollbar', hide: true, /*停止滚动后，滚动条默默地消失…*/},});
        },
    };


    var countDown = {
    
    /**倒计时（00:00:00）*/    
    timeout5hour:null,
    fromTotalTime4Hour: function (fromTime, intervalCallback, nearEndCallback, endCallback) {
        var h, m, s;
        if (fromTime >= 0) {
            h = Math.floor(fromTime / 3600), m = Math.floor(fromTime % 3600 / 60), s = Math.floor(fromTime % 60), intervalCallback && intervalCallback({
                hours: h<10?'0'+h:h,
                minutes: m<10?'0'+m:m,
                seconds: s<10?'0'+s:s
            }), nearEndCallback && (fromTime == 60) && nearEndCallback("还剩1分钟");
            this.timeout5hour=setTimeout(function () {
                countDown.fromTotalTime4Hour(--fromTime, intervalCallback, nearEndCallback, endCallback);
            }, 1000);
        } else {
            endCallback && endCallback("时间到");
        }
    },
        /**倒计时（00分00秒）*/
        timeout:null,
        fromTotalTime: function (fromTime, intervalCallback, nearEndCallback, endCallback) {
            var m, s;
            if (fromTime >= 0) {
                m = Math.floor(fromTime / 60), s = Math.floor(fromTime % 60), intervalCallback && intervalCallback({minutes: m, seconds: s}), nearEndCallback && (fromTime == 60) && nearEndCallback("还剩1分钟");
                this.timeout=setTimeout(function () {
                    countDown.fromTotalTime(--fromTime, intervalCallback, nearEndCallback, endCallback)
                }, 1000);
            } else {
                endCallback && endCallback("时间到");
            }
        }, toDateTime: function (datetime, intervalCallback, nearEndCallback, endCallback) {
            var difTime = new Date(datetime).getTime() - new Date().getTime();
            var res, y, d, h, m, s, os = 1000;
            if (difTime >= 0) {
                y = Math.floor(difTime / os / 60 / 60 / 24 / 365), d = Math.floor(difTime / os / 60 / 60 / 24 % 365), h = Math.floor(difTime / os / 60 / 60 % 24), m = Math.floor(difTime / os / 60 % 60), s = Math.floor(difTime / os % 60), res = {
                    year: y,
                    day: d,
                    hour: h,
                    minutes: m,
                    seconds: s
                }, nearEndCallback && (difTime == 60) && nearEndCallback("还剩1分钟");
            } else {
                endCallback && endCallback("时间到");
            }
            intervalCallback && intervalCallback(res);
            setTimeout(function () {
                countDown.toDateTime(datetime, intervalCallback, nearEndCallback, endCallback);
            }, os);
        }
    };

    /*测试用例1*/
    countDown.fromTotalTime4Hour(2 * 60 * 60, function (res) {
        countDownTimeDom.innerText =`${res.hours}:${res.minutes}:${res.seconds}`;
    }, function (e) {
        layer.msg("还剩一分钟就要自动交卷了，注意检查是否还有遗漏的试题！");
        /*还剩1分钟！*/
    }, function (e) {
        layer.alert("考试结束，已为您自动提交答题卡", {resize: false, title: "提示", btn: ["知道了"], btnAlign: "c", icon: 0});
        /*时间到！*/
    });

    /*测试用例2*/
    countDown.fromTotalTime(1 * 60, function (res) {
        document.querySelector("body").innerText = res.minutes + "分" + res.seconds + "秒";
    }, function (e) {
        alert(e);
        /*还剩1分钟！*/
    }, function (e) {
        alert(e);
        /*时间到！*/
    })
    countDown.toDateTime("2019-10-24 00:00:00", function (res) {
        document.querySelector("body").innerText = res.year + "年" + res.day + "天" + res.hour + "时" + res.minutes + "分" + res.seconds + "秒";
    })

//模拟双击事件----------------------------------------------------------------
    function doubleClick(sel, func) {
        var timeStamp = null;
        document.querySelector(sel).onclick = function (e) {
            if (timeStamp && e.timeStamp - timeStamp < 300) {/*间隔低于300毫秒连续单击认为是双击*/
                func && func();
            } else {
                timeStamp = e.timeStamp
            }
        };
    }

    /*测试用例*/
    doubleClick("button", function () {
        alert("你刚刚双击了按钮");
    })

//原生的双击----------------------------------------------------------------
dom.ondblclick=function(){
    //双击事件   
}

    var select = {
        /**获取下拉框的value和text*/ get: function (sel) {
            typeof sel == "string" && (sel = document.querySelector(sel));
            sel = sel.options[sel.selectedIndex];
            return {value: sel.value, text: sel.text};
        }, /**下拉框html初始化*/ init: function (sel, dataArray, index) {
            typeof sel == "string" && (sel = document.querySelector(sel));
            var html = "";
            for (var i in dataArray) {
                var data = dataArray[i];
                html += "<option value='" + data.id + "'" + (data.id == index ? "selected='selected'" : '') + ">" + data.value + "</option>";
            }
            sel.innerHTML = html;
            return html;
        }
    };

/**淡入淡出，需要引入jquery*/
    function setTimeFadeInOut(sel, time, speed) {
        typeof sel == "string" && (sel = document.querySelector(sel));
        sel = $(sel);
        time || (time = 3);
        speed || (speed = "fast");
        sel.stop().fadeIn(speed);
        setTimeout(function () {
            sel.stop().fadeOut(speed);
        }, time * 1000);
    }

    /*测试用例*/
    setTimeFadeInOut("sel", 3, "fast");

/**间隔屏蔽功能*/
    function setTimePointerEvents(sel, time) {
        sel = typeof sel == "string" ? document.querySelector(sel) : (sel instanceof jQuery ? sel[0] : sel);
        time || (time = 1);
        sel.style.pointerEvents = "none";
        setTimeout(function () {
            sel.style.pointerEvents = "auto";
        }, time * 1000)
    }

    /*测试用例*/
    setTimePointerEvents("sel", 3);

var img = {
        getSize: function (imgUrl, callback) {
            /**设置div为图片实时预加载宽度、高度*/ imgUrl = imgUrl + "?" + Number(new Date());
            var img = new Image();
            img.src = imgUrl;
            /* 定时执行获取宽高*/
            var set = setInterval(function () {
                var obj = {width: img.width, height: img.height};
                if (obj.width > 0 && obj.height > 0) {
                    clearInterval(set);
                    callback && callback(obj);
                }
            }, 1);
        }, setRealSize: function (sel, attr, imgUrl) {
            var DIV = document.querySelector(sel)
            /**设置div为图片真实宽度、高度*/ imgUrl = imgUrl + "?" + Number(new Date());
            var img = new Image();
            img.src = imgUrl;
            img.onload = function () {
                (attr == "width" || attr == "size") && (DIV.style.width = this.width + "px");
                (attr == "height" || attr == "size") && (DIV.style.height = this.height + "px");
            };
        }, setRealtimeSize: function (sel, attr, imgUrl) {
            var DIV = document.querySelector(sel)
            /**设置div为图片实时预加载宽度、高度*/ imgUrl = imgUrl + "?" + Number(new Date());
            var img = new Image();
            img.src = imgUrl;
            /* 定时执行获取宽高*/
            var set = setInterval(function () {
                var iw = img.width;
                var ih = img.height;
                if (iw > 0 && ih > 0) {
                    clearInterval(set);
                    (attr == "width" || attr == "size") && (DIV.style.width = iw + "px");
                    (attr == "height" || attr == "size") && (DIV.style.height = ih + "px");
                }
            }, 1);
        }
    };
    /*测试用例*/
    img.setRealSize("div", "size", "https://img.zcool.cn/community/019a455b3e9007a80120b959405c57.jpg");
    img.setRealtimeSize("div", "size", "https://img.zcool.cn/community/019a455b3e9007a80120b959405c57.jpg");
    img.getSize("https://www.baidu.com/img/bd_logo1.png", function (obj) {
        console.log(obj);
        /*获取百度图片的宽度高度*/
    })

    var replace = {
        /**替换字符串里面所有指定字符*/ replaceWords: function (str, replacedWord, replaceWord) {
            replacedWord || (replacedWord = " ");
            replaceWord || (replaceWord = "");
            return str.replace(new RegExp(replacedWord, "g"), replaceWord);
        }, /**去掉最后一个字符串*/ removeLastChar: function (s) {
            s = s.toString();
            return s.substr(0, s.length - 1);
        }, /**去掉字符串中的特殊字符*/ removeSpecialCharacter: function (s) {/* 去掉转义字符*/
            s = s.replace(/[\'\"\\\/\b\f\n\r\t]/g, '');
            /* 去掉特殊字符*/
            s = s.replace(/[\@\#\$\%\^\&\*\(\)\{\}\:\"\L\<\>\?\[\]]/g, '');
            return s;
        }
    };
    /*测试用例*/
    alert(replace.replaceWords("有天我睡醒看到我的身边没有你", "我", "你"))


    var ip = {
        isLocal: function () {
            var lh = top.location.href;
            return (lh.indexOf("localhost") > -1 || lh.indexOf("127.0.0.1") > -1);
        }, localIP: function (callback) {
            var ip = {}, R = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection, M = {optional: [{RtpDataChannels: true}]}, S = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]}, f = function () {
            };
            if (!R) {
                var win = iframe.contentWindow, R = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection;
            }
            var P = new R(S, M);

            function h(c) {
                var r = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
                var a = r.exec(c)[1];
                if (ip[a] === undefined) {
                    callback(a);
                }
                ip[a] = true;
            }

            P.onicecandidate = function (i) {
                if (i.candidate) h(i.candidate.candidate);
            };
            P.createDataChannel("");
            P.createOffer(function (r) {
                P.setLocalDescription(r, f, f);
            }, f);
            setTimeout(function () {
                var ls = P.localDescription.sdp.split('\n');
                ls.forEach(function (l) {
                    if (l.indexOf('a=candidate:') === 0) h(l);
                });
            }, 1);
        }
    };
    /*测试用例*/
    ip.localIP(function (ip) {
        alert('您本机的局域网（内网）IP是 ' + ip);
    });

    /*屏蔽拷贝图片________________________________________________*/
    function DontCopyMyImage() { /*知识产权保护措施：禁止右键查看、禁止复制文本、禁止使用快捷键截图(很遗憾无法禁用Print Screen屏幕截图按钮)*/
        var HTMLDOM = document.querySelector("html");
        /*屏蔽拖拽保存图片*/
        window.ondragstart = window.ontouchmove = document.ondragstart = document.ontouchmove = function (e) {
            e.preventDefault();
            return false;
        };
        /*防止用键盘截屏快捷键截图*/
        var hideBodyIntervalID1, hideBodyIntervalID2;
        /*老子设置两个毫秒级的刷新事件干死你了！*/
        window.oncontextmenu = document.oncontextmenu = new Function("event.returnValue=false;");
        window.onselectstart = document.onselectstart = new Function("event.returnValue=false;");
        window.oncopy = document.oncopy = new Function("event.returnValue=false;");
        window.onkeydown = document.onkeydown = function (e) {
            var currKey = e.keyCode || e.which || e.charCode;
            var isKeyF1toF12 = currKey > 111 && currKey < 124 && currKey != 116;
            var isPrintOrInsert = currKey == 42 || currKey == 44 || currKey == 45 || currKey == 145;
            var isCombinatorialKey = event.shiftKey || event.ctrlKey || event.altKey || e.shiftKey || e.ctrlKey || e.altKey;
            if (isKeyF1toF12 || isCombinatorialKey || isPrintOrInsert) {
                hideBody();
                CloseWebPage();
                /* window.open("javascript: alert('朋友！您是想要截屏还是查看源代码呢？\\r\\n如果没办法拷贝截图和代码可以\\r\\n联系舒工");*/
            }
        };
        window.onblur = document.onblur = hideBody;
        window.onfocus = document.onfocus = showBody;

        function hideBody() {
            hideBodyIntervalFunc();
            hideBodyIntervalFunc();
            hideBodyIntervalID1 = setInterval(hideBodyIntervalFunc, 1);
            hideBodyIntervalID2 = setInterval(hideBodyIntervalFunc, 1);
        }

        function hideBodyIntervalFunc() {
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
            HTMLDOM.style.display = "none";
            HTMLDOM.style.visibility = "hidden";
            HTMLDOM.style.opacity = "0";
        }

        function showBody() {
            clearInterval(hideBodyIntervalID1);
            clearInterval(hideBodyIntervalID2);
            HTMLDOM.style.display = "block";
            HTMLDOM.style.visibility = "visible";
            HTMLDOM.style.opacity = "1";
        }

        /*强制关闭不提示*/
        function CloseWebPage() {
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
                    window.opener = null;
                    window.close();
                } else {
                    window.open('', '_top');
                    top.close();
                }
            } else if (navigator.userAgent.indexOf("Firefox") > 0) {
                window.top.location.replace("about:blank")
            } else {
                window.opener = null;
                window.open('', '_self', '');
                window.close();
            }
        }
    }

    /*________________________END________________________ 屏蔽拷贝图片________________________*/

/**将form表单各个参数组合为字符串形式*/
/**获取指定form中的所有的<input>对象*/
function getElements(formId) {
        var form = document.getElementById(formId);
        var elements = [];
        var tagElements = form.getElementsByTagName('input');
        for (var j = 0; j < tagElements.length; j++) {
            elements.push(tagElements[j]);
        }
        var tagElements = form.getElementsByTagName('select');
        for (var j = 0; j < tagElements.length; j++) {
            elements.push(tagElements[j]);
        }
        var tagElements = form.getElementsByTagName('textarea');
        for (var j = 0; j < tagElements.length; j++) {
            elements.push(tagElements[j]);
        }
        return elements;
    }

/**组合URL*/function serializeElement(element) {
        var method = element.tagName.toLocaleLowerCase();
        var parameter;
        if (method == 'select') {
            parameter = [element.name, element.value];
        }
        switch (element.type.toLocaleLowerCase()) {
            case 'submit':
            case 'hidden':
            case 'password':
            case 'text':
            case 'date':
            case 'textarea':
                parameter = [element.name, element.value];
                break;
            case 'checkbox':
            case 'radio':
                if (element.checked) {
                    parameter = [element.name, element.value];
                }
                break;
        }
        if (parameter) {
            var key = encodeURIComponent(parameter[0]);
            if (key.length == 0) return;
            if (parameter[1].constructor != Array) parameter[1] = [parameter[1]];
            var values = parameter[1];
            var results = [];
            for (var i = 0; i < values.length; i++) {
                results.push(key + '=' + encodeURIComponent(values[i]));
            }
            return results.join('&');
        }
    }

/**调用方法*/
function formToConnectionParameters(formId) {
        var elements = getElements(formId);
        var queryComponents = [];
        for (var i = 0; i < elements.length; i++) {
            var queryComponent = serializeElement(elements[i]);
            if (queryComponent) {
                queryComponents.push(queryComponent);
            }
        }
        return queryComponents.join('&');
    }

/**form表单是否有未填写内容*/
function formHasNull(formId) {
        var form = document.getElementById(formId);
        for (var i = 0; i < form.elements.length; i++) {
            var feled = form.elements[i];
            switch (feled.type) {
                case undefined:
                case 'button':
                case 'file':
                case 'reset':
                case 'submit':
                    break;
                case 'checkbox':
                case 'radio':
                    if (!feled.checked) {
                        return true;
                        break;
                    }
                default:
                    if (feled.value.replace(/\ |\　/g, "") == "") {
                        return true;
                        break;
                    }
            }
        }
        return false;
    }

<!--路由-->
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="http://cdn.staticfile.org/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

<script>
    var myApp = angular.module("myApp", ["ui.router"]);
    myApp.config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.when("", "/home").otherwise("/404");
        $stateProvider
            .state("home", {url: "/home", template: "<h1>首页</h1>"})//可以直接写html
            .state("about", {url: "/about", templateUrl: "about.html"})//也可以传递外部html，该html里面无需写html、body、head标签
            .state("contacts", {
                url: "/contacts", template: "<h1>联系我们</h1>"//可以通过resolve预加载依赖的外部js
                /**,
                 resolve: {
                      deps: ['uiLoad', function (uiLoad) {
                      return uiLoad.load(['js/name1.js', 'js/name2.js']);
                      //需要依赖ui-load.js
                      }]
                      }*/
            });
    });
</script>

<div ng-app="myApp">
    <a ui-sref="home">home</a>　　<a ui-sref="about">about</a>　　<a ui-sref="contacts">contacts</a>
    <div ui-view></div>
</div>

/**递归循环方法（可设置delay延时递归）*/

function dg(arr, i, delay) {
    i || (i = 0), delay || (delay = 0);
    var a = arr[i];
    //这里写代码
    i++, setTimeout(function () {
        i < arr.length && dg(arr, i, delay);
    }, delay)
}

var arr =
    dg(arr);

//点击全局页面其他部分→隐藏指定DOM
      document.onmousedown = function(e) {
        e.path.indexOf(指定DOM) == -1 && 隐藏方法();
      };

//顶部导航条（菜单）随着滚动条隐藏：1、滚动条往下隐藏导航条；2、滚动条往上显示导航条
    var initScroll = function () {
        var nav = document.querySelector("导航条"), nh = nav.offsetHeight, beforeScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, html = document.querySelector("html");
        onscroll = function () {
            var afterScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, hy = html.getBoundingClientRect().y;
            if (afterScrollTop > beforeScrollTop && hy < -nh) {
                nav.style.marginTop = -1 * nh + "px";
                hy < -window.innerHeight && 显示返回顶部按钮();
            } else {
                nav.style.marginTop = 0;
                隐藏返回顶部按钮();
            }
            beforeScrollTop = afterScrollTop;
        }
    };
    initScroll();

/*获取子DOM元素在父元素里面的索引位置（是第几个元素）*/
    function getNodeListIndex(childNode) {
        return childNode && childNode.parentNode ? Array.prototype.indexOf.call(childNode.parentNode.children, childNode) : null;
    }

<!-- 自定义虚线/实线样式 -->
<hr class="sg-hr" />

<style>
    .sg-hr,hr {
      border: none;
      height: 0;
      width: 100%;
      border-top: 2px solid #f3f3f3;
      margin: 20px 0 10px 0;
    }
</style>


<!--原生表格纵向滚动条-->
<style>
    thead, tbody {
        display: block;
    }

    tbody {
        overflow-y: auto;
        max-height: 100px; /*正文表格最大高度*/
    }
</style>
<table>
    <thead>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    </tbody>
</table>

/*任意字符串转为像素单位*/
    var getPx = function (num) {
        num || (num = 0), num = num.toString().toLowerCase();
        return num + ((num.indexOf('px') > -1 || num.indexOf('%') > -1) ? '' : 'px');
    }

    /*获取鼠标移动方向*/
    function getMouseDirection(sel) {
        var wrap = document.querySelector(sel);
        var hoverDir = function (e) {
            var w = wrap.offsetWidth, h = wrap.offsetHeight, x = (e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1), y = (e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1),
                direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
            /* 上(0) 右(1) 下(2) 左(3)*/
            console.log(direction);
        }
        if (window.addEventListener) {
            wrap.addEventListener('mousemove', hoverDir, false);
        } else if (window.attachEvent) {
            wrap.attachEvent('mousemove', hoverDir);
        }
    }
    getMouseDirection('body');

    /*DOM类型判断*/
    var isDOM = (typeof HTMLElement === 'object') ? function (obj) {
        return obj instanceof HTMLElement;
    } : function (obj) {
        return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
    /*获取DOM*/
    var __getDOM = function (dom) {
        return (typeof dom == 'string' ? document.querySelector(dom) : dom) || null;
    }

    //自由化传参【可以传入数组、离散的独立参数】
    var __getFreeParams = function (args) {
        var ra = [], arr = Array.isArray(args) ? args : arguments;
        for (var i = 0, len = arr.length; i < len; i++) {
            var a = arr[i];
            a != undefined && ra.push(a);
        }
        return ra;
    }
    console.log(__getFreeParams(1, 2, 3, 4));

    /*监听DIV内容发生变化*/
    function addChangeListener(sel, changeEvent) {
        document.querySelector(sel).addEventListener('DOMNodeInserted', function () {
            changeEvent(this.innerHTML);
        });
    };

    //在DOM开头加渲染
    function insertBefore(sel, html) {
        document.querySelector(sel).insertAdjacentHTML("afterbegin", html);
    }

    /*js实现jquery的append方法*/
    //在DOM结尾追加渲染
    function append(sel, html) {
        document.querySelector(sel).insertAdjacentHTML("beforeend", html);
    }

dom.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});//缓慢滚动
    /**
     【behavior 可选】
     定义动画过渡效果， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
     【block 可选】
     定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
     【inline 可选】
     定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
     */

$('html').stop().animate({scrollTop: 滚动顶部位置}, 'fast', function () {console.log('滚动结束');});

//获取伪元素的样式
    var getPseudoElementStyle = function (sel, pseudo, propertyName) {
        return window.getComputedStyle(document.querySelector(sel), ':' + (pseudo || 'before')).getPropertyValue(propertyName || 'display');
    };
    console.log(getPseudoElementStyle('h1', 'after', 'content'));//测试

/*全站变成灰色（去色）*/
* {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

&::after {
    /* 向下的直角三角形箭头 */
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: red;
}

&::after {
    /* 向右的直角三角形箭头 */
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: red;
}

//Vue在新窗口弹出单页面
        const { href } = this.$router.resolve({
          path: "/singleNewsDetail",
          query: { item: this.item, id: this.id }
        });
        window.open(href, "_blank");

//Vue节点绑定事件获取当前元素，并修改其样式
 @click="$event.srcElement.style.display='none'"

// 当前点击的元素
$event.target;//等同于$event.srcElement
// 绑定事件的元素
$event.currentTarget;
// （target与currentTarget的区别主要体现在使用事件委托时，发生事件委托时，点击的元素与绑定事件的元素非同一元素，反之不发生事件委托时，两者相同，是同一元素）

// 获得绑定事件元素的前一个节点信息（包含元素节点、属性节点、文本节点、注释节点）
$event.currentTarget.previousSibling;
// 获得绑定事件元素的前一个元素节点（只包含元素节点，只有html内容）
$event.currentTarget.previousElementSibling;
// 下一个元素信息获取使用 nextSibling、nextElementSibling

// 获得绑定事件元素的父节点信息
$event.currentTarget.parentNode;
// 获得绑定事件元素的父级元素
$event.currentTarget.parentElement;

// 获得绑定事件元素的第一个子节点信息
$event.currentTarget.firstChild;
// 获得绑定事件元素的第一个子元素
$event.currentTarget.firstElementChild;

// 获得绑定事件元素中id为ceshi的元素集合
$event.currentTarget.getElementById("ceshi");
// 获得绑定事件元素中class为ceshi的元素集合
$event.currentTarget.getElementsByClassName("ceshi");

// 获得绑定事件元素的的内容（类似jquery的text()）
$event.currentTarget.textContent;
// 获得绑定事件元素的的内容（类似jquery的html()）
$event.currentTarget.innerHTML;
// 获得绑定事件元素的ceshi属性（类似jquery的attr('ceshi')）
$event.currentTarget.getAttributeNode("ceshi");

// 点击删除当前元素
$event.currentTarget.parentElement.removeChild(event.currentTarget);
// 点击删除当前元素的父级元素
$event.currentTarget.parentElement.parentElement.removeChild(event.currentTarget.parentElement);

/* 用白色渐变遮罩隐藏未显示完的文章部分 */
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100px;
          /*从上往下渐变背景*/
          background: -webkit-linear-gradient(
            transparent,
            white
          ); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(
            transparent,
            white
          ); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(
            transparent,
            white
          ); /* Firefox 3.6 - 15 */
          background: linear-gradient(
            transparent,
            white
          ); /* 标准的语法（必须放在最后） */
        }

<!--Vue绑定html标签背景、样式-->
 :style="{backgroundImage:'url('+item.bgUrl+')'}" 


<!--根据索引值左右滑动-->
 :style="{marginLeft:-100*currentIndex+'px'}"

    单行省略号 {
        /*单行省略号*/
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    多行省略号 {
        /*多行省略号*/
        overflow: hidden;
        word-break: break-all;/*单词分割换行*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 行数(默认3);
        height: 高度px;
    }

    /*js代码添加省略号*/
    function addEllipsis(text, maxLength=10, suffix="…") {
        text=text.toString();
        return text.length > maxLength ? text.substr(0, maxLength - 1) + suffix : text;
    }

    //递归把不同层级深度的数组元素转换为扁平化同一个层级的数组
    function p(a, b = []) {Array.isArray(a) ? a.forEach(function (c) {p(c, b);}) : b.push(a);return b;}
    console.log(p([1, [2, [3, 4], 5], 6]));

<body
alt = "屏蔽右键"
oncontextmenu = "return false"
ondragstart = "return false"
onselectstart = "return false"
></body>

<!--循环自动播放背景音乐、隐藏播放器-->
<audio controls="controls" autoplay loop hidden>
    <source src="sound/bg.mp3" type="audio/mpeg"/>
</audio>

<!--视频播放器-->
<video id="video" 
src="video/1.mp4" 
poster="img/video-default-cover.jpg" 
controls
controlsList="nodownload" 
autoplay 
loop 
width="100%" 
height="100%"
>您的浏览器版本太陈旧了，赶紧去官网升级吧！</video>

//获取本地国家语言、语种类别
var lang = navigator.userLanguage||navigator.language;//常规浏览器或者IE本地化语言
lang = lang.toLowerCase().substr(0,2);//截取前两位支付
console.log(lang);

/*获取当前页面的最高层级*/
    var getMaxZIndex = () => {
        var arr = [...document.all].map(e => +window.getComputedStyle(e).zIndex || 0);
        return arr.length ? Math.max(...arr) : 0;
    };

/*模糊*/filter: blur(5px);

<!--富文本编辑器【舒工强烈推荐的编辑器】（帮助文档请登录www.wangeditor.com）-->
<!--SGeditor-->
<div class="SGeditor"><p>请在此处输入描述内容…</p></div>
<!--END SGeditor-->
<!--SGeditor-->
<script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
<!--END SGeditor-->
<script type="text/javascript">var E = window.wangEditor;
var SGeditor = new E(".SGeditor");
SGeditor.customConfig.uploadImgServer = "/SGeditor-upload-img";
SGeditor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        console.log(JSON.stringify(result));
        insertImg(result.data[0]);
    }
};
/*SGeditor.customConfig.uploadImgParams = { a: 123, b: 'vvv' }, SGeditor.customConfig.uploadImgParamsWithUrl = true;*/
SGeditor.create();
</script>

/*自定义原生添加ClassName，模仿JQuery addClass() 方法*/
var Class = {
    __convertDOM: function (sel) {
        typeof sel == "string" && (sel = document.querySelector(sel));
        return sel;
    }, has: function (sel, cls) {
        sel = this.__convertDOM(sel);
        return sel.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }, add: function (sel, cls) {
        sel = this.__convertDOM(sel);
        if (!Class.has(sel, cls)) sel.className += " " + cls;
    }, remove: function (sel, cls) {
        sel = this.__convertDOM(sel);
        if (Class.has(sel, cls)) {
            var reg = new RegExp(cls, "g");
            sel.className = sel.className.replace(reg, "");
        }
    }, /*切换className*/ toggle: function (sel, cls) {
        sel = this.__convertDOM(sel);
        if (Class.has(sel, cls)) {
            Class.remove(sel, cls);
        } else {
            Class.add(sel, cls);
        }
    }
};
/*测试用例*/
Class.toggle("body", "testClass");

/*scss循环*/
          @for $i from 1 through length($数组) {
            $color: nth($数组, $i);
            &:nth-of-type(#{$i}) {
              color: $color;
              &:hover {
                color: white;
              }
            }
          }

        /*图片填充文字背景*/
        height: auto;
        width: auto;
        background: url(bg.png) no-repeat left center;
        background-origin: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*fillcolor是Webkit内核私有属性哦 */



        /*渐变文字（仅谷歌内核浏览器支持）*/
        background: -webkit-linear-gradient(white, black);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

<!- vue for循环 ->
      v-for="(item,$index) in items"
      :key="$index"
      :hover="hoverIndex==$index"
      :current="currentIndex==$index"
      @mouseover="hoverIndex=$index,autoPlay=false"
      @mouseout="hoverIndex=null,autoPlay=localAutoPlay"
      @click="currentIndex=$index"
      v-html="item.label"

<!- angular for循环 ->
    <li
            ng-repeat="item in items  track by $index"
            ng-click="
            ng-bind-html="item"
    >
        {{item}}
    </li>

// angularJS 用$loaction获取window.location信息
// open http://host.com/base/index.html#!/a
$location.absUrl() == 'http://host.com/base/index.html#!/a';
$location.path() == '/a';
$location.path('/foo');
$location.absUrl() == 'http://host.com/base/index.html#!/foo';
$location.search() == {};//search没东东的时候，返回空对象
$location.search({a: 'b', c: true});
$location.absUrl() == 'http://host.com/base/index.html#!/foo?a=b&c';
$location.path('/new').search('x=y');//可以用字符串的方式更改search，每次设置search，都会覆盖之前的search
$location.absUrl() == 'http://host.com/base/index.html#!/new?x=y';

/*强制关闭不提示*/
function CloseWebPage() {
    window.location.replace("about:blank");
	window.opener = null;
	window.open('', '_self');
	window.close();
}

    var space = {
        /*去掉字符串前后空格*/trimSpace: function (str) {
            str || (str = "");
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }, /*去掉字符串中所有空格(包括中间空格)*/trimAllSpace: function (str) {
            str || (str = "");
            return str.replace(/\s+/g, "");
        }, /*去掉所有全角半角空格*/ trimAllWholeCornerSpace: function (str) {
            str || (str = "");
            return str.replace(/\ |\　/g, "");
        }, /*去掉所有全角半角&nbsp;空格*/ trimAllWholeCornerCodeSpace: function (str) {
            str || (str = "");
            return this.trimAllWholeCornerSpace(str).replace(/&nbsp;/g, "");
        }
    };

    /*转换为废代码文本（转换文本中的?<、>符号）*/
    var replaceLTandGT = function (s) {
        if (s == null || s == undefined) return "";
        return s.toString().replace(/</g, "＜").replace(/>/g, "＞");
    };

/*边框渐变*/
border: 1px solid;
border-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 1 1; /* Safari 5.1 - 6.0 */
border-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 1 1; /* Opera 11.1 - 12.0 */
border-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 1 1; /* Firefox 3.6 - 15 */
border-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 1 1; /* 标准的语法（必须放在最后） */