常用函数封装整理

最新推荐文章于 2020-11-18 16:05:41 发布

Alvin_扣扣953821815

最新推荐文章于 2020-11-18 16:05:41 发布

阅读量289

点赞数 1

阻止对象默认行为

//preDef(Event对象)

function preDef(ev){
    var ev = ev || window.event;
    if(ev.preventDefault){
        ev.preventDefault();
    }else {
        ev.returnValue = false;
    }
}
 
 1
2
3
4
5
6
7
8
9
10

获取触发事件目标

//getTarget(Event对象)

function getTarget(ev){
    var ev = ev || window.event;
    if(ev.target){
        return ev.target;
    }else if(window.event.srcElement){
        return window.event.srcElement;
    }
}   
 
 1
2
3
4
5
6
7
8
9
10

获取滚动条位置

//获取滚动条的位置，即滚动距离，返回的结果是一个对象

function getSP(){
    return {
        top : document.documentElement.scrollTop || document.body.scrollTop,
        left : document.documentElement.scrollLeft || document.body.scrollLeft
    }
}
 
 1
2
3
4
5
6
7
8

获取可视化窗口大小

function getWindow() {
    if(window.innerWidth !== void 0) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}   
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

获取屏幕坐标

//获取鼠标的位置信息,该位置为鼠标在整个页面的位置，而不是可视化窗口的位置

function getMouse(ev) {
    if(ev.pageX !== void 0) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

js拖拽效果(目标相对定位)

//实现JS的拖拽效果,利用相对定位实现  onDrop(dom节点)

function onDrop(ele) {
    if(ele.nodeType === 1) {
        ele.style.position = "relative";
        ele.onmousedown = function(ev) {
            var ev = ev || window.event;
            var diffX = ev.clientX - parseInt(ele.style.left + "0"),
                diffY = ev.clientY - parseInt(ele.style.top + "0");
            document.onmousemove = function(e) {
                var e = e || window.event;
                ele.style.left = e.clientX - diffX + "px";
                ele.style.top = e.clientY - diffY + "px";
            };
            document.onmouseup = function(e) {
                var e = e || window.event;
                this.onmousemove = null;
                this.onmouseup = null;
            };
        }
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

判断类型

//判断数据类型，返回首字母大写的字符串

function getType(ob){
    return ({}).toString.call(ob).match(/(\w+)]$/)[1];
}
 
 1
2
3
4
5

数组去重

//返回没有重复值的新数组(多个NaN也视为重复)
//ES6最简 [...new Set([1,2,3,1,2,1,4])]
//ES5最简 [1,2,3,1,4,1,2,1].filter(function(e,i,arr){return i===arr.indexOf(e)})

function unique(arr) {
    var a = [],
        hasNaN = false;
    for(var i = 0; i < arr.length; i++) {
        if(a.indexOf(arr[i]) == -1) {
            if(arr[i] !== arr[i]) {
                if(hasNaN) {
                    continue;
                }
                hasNaN = true;
            }
            a.push(arr[i]);
        }
    }
    return a;
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

深度克隆

//实现深度克隆对象

function clone(ob) {
    if(typeof ob === "object") {
        var newOb = ({}).toString.call(ob) === "[object Array]" ? [] : {};
        for(var name in ob) {
            newOb[name] = typeof ob[name] === "object" ? clone(ob[name]) : ob[name];
        }
        return newOb;
    } else {
        return ob;
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

获取时间

//返回格式化后的时间,str为格式化样式,默认为(yyyy-MM-dd HH:mm:ss),date为时间对象，默认为当前时间

function getTime(str,date){
  var str = str || "yyyy-MM-dd HH:mm:ss";
  var date = date || new Date();
  var obj = {
    yyyy:date.getFullYear(),
    yy:(""+ date.getFullYear()).slice(-2),
    M:date.getMonth()+1,
    MM:("0"+ (date.getMonth()+1)).slice(-2),
    d:date.getDate(),
    dd:("0" + date.getDate()).slice(-2),
    H:date.getHours(),
    HH:("0" + date.getHours()).slice(-2),
    h:date.getHours() % 12,
    hh:("0"+date.getHours() % 12).slice(-2),
    m:date.getMinutes(),
    mm:("0" + date.getMinutes()).slice(-2),
    s:date.getSeconds(),
    ss:("0" + date.getSeconds()).slice(-2),
    w:"星期"+['日', '一', '二', '三', '四', '五', '六'][date.getDay()]  };
  return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
}   
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

随机产生颜色

//产生16进制的颜色值

function getColor(){
    return "#"+Math.random().toString(16).substr(2,6);
}   
 
 1
2
3
4
5

天数跟秒转换

//天数跟秒之间的转换,适用于倒计时,秒杀..
//例如"1天12小时12分32秒"<==>130352之间相互转换

function changeTime(t) {
    if(typeof t === "string") {
        var num = 0;
        t.replace(/(\d+)(天|小时|分|秒)/g, function(a, b, c) {
            switch(c) {
                case "天":
                    num += (+b) * 86400;
                    break;
                case "小时":
                    num += (+b) * 3600;
                    break;
                case "分":
                    num += (+b) * 60;
                    break;
                case "秒":
                    num += (+b);
                    break;
            }
        });
        return num;
    } else if(typeof t === "number") {
        var time = "",
            ob = {
                "天": 86400,
                "小时": 3600,
                "分": 60,
                "秒": 1
            };
        if(t < 0) return "0秒";
        for(var name in ob) {
            var num = ob[name];
            if(t >= num) {
                time += (t / num | 0) + name;
                t %= num;
            }
        }
        return time;
    }
}
 
 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

JS千分隔位

//每3位数加个逗号，保留两位小数
//123456.454==>123,456.45

function separator(str){
    if(!isNaN(+str)){
        str = (+str).toFixed(2);
        return str.replace(/\B(?=(?:\d{3})+\.)/g,",");
    }
}       
 
 1
2
3
4
5
6
7
8
9

获取计算后样式

//获取某个节点计算后样式,参数为dom节点,属性名称

function getCpStyle(ele,attribute){
    if(typeof getComputedStyle === "function"){
        return getComputedStyle(ele)[attribute];
    }else if(ele.currentStyle){
        return ele.currentStyle[attribute];
    }
}       
 
 1
2
3
4
5
6
7
8
9

获取XMLHTTPRequest对象

//返回一个XMLHTTPRequest对象

function getXHR() {
    var xhr;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}
 
 1
2
3
4
5
6
7
8
9
10
11

类名操作

//类似jq的toggleClass,没有就添加,有就删除

function setClass(ele, className) {
    if(ele.className !== void 0) {
        var str = ele.className,
            reg = new RegExp("\\b" + className + "\\s");
        if(reg.test(str)) {
            str = str.replace(reg, "");
        } else {
            str += " " + className + " ";
        }
        ele.className = str.replace(/\s+/, " ");
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

cookie操作

var docCookies = {
    getItem: function(sKey) {
        return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
    },
    setItem: function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
        if(!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
            return false;
        }
        var sExpires = "";
        if(vEnd) {
            switch(vEnd.constructor) {
                case Number:
                    sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
                    break;
                case String:
                    sExpires = "; expires=" + vEnd;
                    break;
                case Date:
                    sExpires = "; expires=" + vEnd.toUTCString();
                    break;
            }
        }
        document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
        return true;
    },
    removeItem: function(sKey, sPath, sDomain) {
        if(!sKey || !this.hasItem(sKey)) {
            return false;
        }
        document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
        return true;
    },
    hasItem: function(sKey) {
        return(new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    }
};
 
 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

Ajax对象封装

var Ajax = {
    get: function(url, fn) {
        var obj = new XMLHttpRequest();
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if(obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
                fn.call(this, obj.responseText);
            }
        };
        obj.send();
    },
    post: function(url, data, fn) {
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        obj.onreadystatechange = function() {
            if(obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}