[原]js通用库（持续更新）

发表于 |

1.window 加载时运行

1
2
3
4
5
6
7
8
9
10
11
function addEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        };
    }
}

2.在目标元素后插入元素

1
2
3
4
5
6
7
8
function insertAfter(newElement，targetElement){
    var parent = targetElement.parentNote;//获取目标元素的父元素
    if(parent.lastChild == targetElement ){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

3.取指定范围内的机数

1
2
3
function random(start, end) {
    return Math.floor(Math.random() * (end - start + 1)) + start;
}

4.输出制定格式日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function date2str(x, y) {
    var z = {
        y: x.getFullYear(),
        M: x.getMonth() + 1,
        d: x.getDate(),
        h: x.getHours(),
        m: x.getMinutes(),
        s: x.getSeconds()
    };
    return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function(v) {
        return ((v.length > 1 ? '0' : '') + eval('z.' + v.slice(-1))).slice(
            -(v.length > 2 ? v.length : 2)
        );
    });
}
alert(date2str(new Date(), 'yy-M-d h:m:s'));
alert(date2str(new Date(), 'yyyy-MM-d h:m:s'));

5.浏览器的可见高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getClientHeight() {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight =
            document.body.clientHeight < document.documentElement.clientHeight
                ? document.body.clientHeight
                : document.documentElement.clientHeight;
    } else {
        clientHeight =
            document.body.clientHeight > document.documentElement.clientHeight
                ? document.body.clientHeight
                : document.documentElement.clientHeight;
    }
    return clientHeight;
}
  1. 浏览器的可见宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getClientWidth() {
    var clientWidth = 0;
    if (document.body.clientWidth && document.documentElement.clientWidth) {
        clientWidth =
            document.body.clientWidth < document.documentElement.clientWidth
                ? document.body.clientWidth
                : document.documentElement.clientWidth;
    } else {
        clientWidth =
            document.body.clientWidth > document.documentElement.clientWidth
                ? document.body.clientWidth
                : document.documentElement.clientWidth;
    }
    return clientWidth;
}

7.随机颜色

1
2
3
4
5
6
function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

8.求时间差

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var date1 = new Date(); //开始时间
alert('aa');
var date2 = new Date(); //结束时间
var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数

//计算出相差天数
var days = Math.floor(date3 / (24 * 3600 * 1000));

//计算出小时数
var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));

//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
1
2
3
4
5
6
7
8
9
10
11
alert(
    ' 相差 ' +
        days +
        '天 ' +
        hours +
        '小时 ' +
        minutes +
        ' 分钟' +
        seconds +
        ' 秒'
);

9.input textarea 文字倒计功能

1
2
3
4
5
6
7
8
9
10
11
function albumName() {
    var text = $('#remark').val();
    var counters = 100;
    $('#textLimit').text(counters);
    $('#remark')[0].oninput = function() {
        var text = $('#remark').val();
        var counter = text.length;
        $('#textLimit').text(counters - counter);
        console.log(1);
    };
}

10.判断 ie 版本是否小于 9，是给出提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="" content=""/>
    <title>测试</title>
    <script type="text/javascript">
        if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0")
        {
            alert("您的浏览器版本过低，请下载IE9以上版本");
        }
    </script>
</head>
<body>
    <div>测试内容</div>
</body>
</html>

11.阻止冒泡的方法

1
2
3
4
5
6
7
8
9
function stopPropagation(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        //W3C阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}

12.获取图片大小

1
2
3
4
5
function findSize(field_id) {
    var fileInput = document.getElementById(field_id);
    var byteSize = fileInput.files[0].size;
    return (byteSize / 1024 / 1024).toFixed(2); // Size returned in Mb.
}

13.获取 URL 参数

1
2
3
4
5
6
7
8
9
10
11
12
13
function getUrlParameterS() {
    //获取到Url并且解析Url编码
    var url = decodeURI(location.search);
    var parameters = new Object();
    if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
            parameters[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
        }
    }
    return parameters;
}

14.在浏览器上面查看页面布局层叠关系

1
2
3
4
javascript: (function() {
    document.body.innerHTML +=
        '<style>*{background: #000 !important;color: #0f0 !important;outline: solid #f00 1px !important;}</style>';
})();

使用方法 打开 Google 浏览器—》书签—>书签管理器—》右键新建网页，名称随便输入，然后把上面的代码考入网页中；
打开自己的页面，在书签中找到刚才添加的书签点击就会在界面上呈现你的页面的层叠关系

15.跨浏览器事件处理工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var EventUtil = {
    addEvent: function(el, eventType, fn) {
        //绑定事件
        if (el.addEventListener) {
            el.addEventListener(eventType, fn, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + eventType, fn);
        } else {
            el['on' + eventType] = fn;
        }
    },
    removeEvent: function(el, eventType, fn) {
        //移除事件
        if (el.removeEventListener) {
            el.removeEventListener(eventType, fn, false);
        } else if (el.detachEvent) {
            el.detachEvent('on' + eventType, fn);
        } else {
            el['on' + eventType] = null;
        }
    },
    getEvent: function(ev) {
        //获取事件对象
        return ev ? ev : window.ev;
    },
    getTarget: function(ev) {
        //获取元素
        return ev.target || ev.srcElement;
    },
    preventDefault: function(e) {
        //阻止默认行为
        if (ev.preventDefault) {
            ev.preventDefault();
        } else {
            ev.returnValue = false;
        }
    },
    stopPropagation: function(ev) {
        //阻止冒泡或捕获
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    }
};

15.判断是否是正整数

1
2
3
4
function isPositiveInteger(str) {
    const reg = /^[0-9]*[1-9][0-9]*$/;
    return reg.test(str);
}

部分来源于网络，如有侵权请联系博主

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的 GitHub 留下一个您的 start 和 issues

前往 LEE 的 github 给他一个 Start 鼓励一下吧

原创转载请标注出处：https://leehongqiang.github.io