js-常用函数common.js

1.rnd

/**
 *获取一个n到m的随机数
 *@param n number
 *@param m number
 */
function rnd(n, m) {
    return Math.random() * (m - n) + n;
}

2.toDub

/**
 *补零
 *@param n number
 */

function toDub(n) {
    return n < 10 ? '0' + n : '' + n;
}

3.setStyle

/**
 *批量设置样式
 *@param obj obj
 *@param json json
 */

function setStyle(obj, json) {
    for (var key in json) {
        obj.style[key] = json[key];
    }
}

4.getStyle

/**
 *获取样式
 *@param obj obj
 *@param sName string
 */

function getStyle(obj, sName) {
    return (obj.currentStyle || getComputedStyle(obj, false))[sName];
}

5.getByClass

/**
 *通过class名获取一组元素
 *@param oParent obj
 *@param sClass string
 */

function getByClass(oParent, sClass) {
    if (oParent.getElementsByClassName) {
        return oParent.getElementsByClassName(sClass);
    }
    else {
        var aRes = [];
        var aChild = oParent.getElementsByTagName('*');
        for (var i = 0; i < aChild.length; i++) {
            var aTmp = aChild[i].className.split(' ');
            for (var j = 0; j < aTmp.length; j++) {
                if (aTmp[j] == sClass) {
                    aRes.push(aChild[i]);
                    break;
                }
            }
        }
        return aRes;
    }
}

6.getPos

/**
 *获取元素到页面的距离
 *@param obj obj
 */

function getPos(obj) {
    var left = 0;
    var top = 0;

    while (obj) {
        left += obj.offsetLeft;
        top += obj.offsetTop;

        obj = obj.offsetParent;
    }

    return {left: left, top: top};
}

7.addEvent

/**
 *事件绑定
 *@param obj obj
 *@param sEv string
 *@param fn function
 */

function addEvent(obj, sEv, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(sEv, fn, false);//false代表事件捕获；
    }
    else {
        obj.attachEvent('on' + sEv, fn);
    }
}

7.removeEvent

/**
 *解除事件绑定
 *@param obj obj
 *@param sEv string
 *@param fnName string
 */

function removeEvent(obj, sEv, fnName) {
    if (obj.removeEventListener) {
        obj.addEventListener(sEv, fnName, false);
    }
    else {
        obj.detachEvent('on' + sEv, fnName);
    }
}

9.setCookie


/**
 *设置cookie
 *@param sName string
 *@param sValue string
 *@param iDay number
 */

function setCookie(sName, sValue, iDay) {
    if (iDay) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + iDay);
        document.cookie = sName + '=' + sValue + '; expires=' + oDate;
    }
    else {
        document.cookie = sName + '=' + sValue;
    }
}

10.getCookie

/**
 *获取cookie
 *@param sName string
 */

function getCookie(sName) {
    var arr = document.cookie.split('; ');
    for (var i = 0; i < arr.length; i++) {
        var aTmp = arr[i].split('=');
        if (aTmp[0] == sName) {
            return aTmp[1];
        }
    }
}

11.ajax

/**
 *发送ajax请求
 *@param options json
 */

function ajax(options) {
    options = options || {};
    var url = options.url;
    if (!url) {
        return;
    }

    var type = options.type || 'get';
    var data = options.data || {};

    //创建ajax对象
    if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    }
    else {
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //open send
    switch (type.toLowerCase()) {
        case 'get':
            oAjax.open('GET', url + '?' + data2url(data), true);
            oAjax.send();
            break;
        case 'post':
            oAjax.open('POST', url, true);
            oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            oAjax.send(data2url(data));
            break;
    }

    oAjax.onreadystatechange = function () {
        if (oAjax.readyState == 4) {
            if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
                //成功
                options.success && options.success(oAjax.responseText);
            }
            else {
                options.error && options.error(oAjax.status);
            }
        }
    };

}

12.data2url

/**
 *把数据变成可以添加到url后面的字符串
 *@param json json
 */

function data2url(json) {
    var arr = [];
    json.t = Math.random();

    for (var key in json) {
        arr.push(key + '=' + json[key]);
    }

    return arr.join('&');
}

13.jsonp

/**
 *发送jsonp请求
 *@param options json
 */

function jsonp(options) {
    options = options || {};
    var url = options.url;
    if (!url) {
        return;
    }
    var data = options.data || {};
    var cbName = options.cbname || 'cb';

    var fnName = 'jsonp_' + Math.random();
    fnName = fnName.replace('.', '');

    window[fnName] = function (res) {
        options.success && options.success(res);

        window[fnName] = null;
        oHead.remove(oS);
    };

    var oS = document.createElement('script');
    data[cbName] = fnName;
    oS.src = url + '?' + data2url(data);
    var oHead = document.getElementsByTagName('head')[0];
    oHead.appendChild(oS);
}

14.move

/**
 *运动
 *@param obj obj
 *@param json json
 *@param options json
 */
//t  当前时间
//b  初始值
//c  总距离
//d  总时间
//var cur=fx(t,b,c,d)
var Tween = {
    Linear: function (t, b, c, d) {
        return c * t / d + b
    }, Quad: {
        easeIn: function (t, b, c, d) {
            return c * (t /= d) * t + b
        }, easeOut: function (t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b
        }, easeInOut: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t + b
            }
            return -c / 2 * ((--t) * (t - 2) - 1) + b
        }
    }, Cubic: {
        easeIn: function (t, b, c, d) {
            return c * (t /= d) * t * t + b
        }, easeOut: function (t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b
        }, easeInOut: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t + b
            }
            return c / 2 * ((t -= 2) * t * t + 2) + b
        }
    }, Quart: {
        easeIn: function (t, b, c, d) {
            return c * (t /= d) * t * t * t + b
        }, easeOut: function (t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b
        }, easeInOut: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t * t + b
            }
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b
        }
    }, Quint: {
        easeIn: function (t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b
        }, easeOut: function (t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b
        }, easeInOut: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t * t * t + b
            }
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
        }
    }, Sine: {
        easeIn: function (t, b, c, d) {
            return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
        }, easeOut: function (t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b
        }, easeInOut: function (t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
        }
    }, Expo: {
        easeIn: function (t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
        }, easeOut: function (t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
        }, easeInOut: function (t, b, c, d) {
            if (t == 0) {
                return b
            }
            if (t == d) {
                return b + c
            }
            if ((t /= d / 2) < 1) {
                return c / 2 * Math.pow(2, 10 * (t - 1)) + b
            }
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
        }
    }, Circ: {
        easeIn: function (t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
        }, easeOut: function (t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
        }, easeInOut: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
            }
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
        }
    }, Elastic: {
        easeIn: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b
            }
            if ((t /= d) == 1) {
                return b + c
            }
            if (!p) {
                p = d * 0.3
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a)
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
        }, easeOut: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b
            }
            if ((t /= d) == 1) {
                return b + c
            }
            if (!p) {
                p = d * 0.3
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a)
            }
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b)
        }, easeInOut: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b
            }
            if ((t /= d / 2) == 2) {
                return b + c
            }
            if (!p) {
                p = d * (0.3 * 1.5)
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a)
            }
            if (t < 1) {
                return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
            }
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
        }
    }, Back: {
        easeIn: function (t, b, c, d, s) {
            if (s == undefined) {
                s = 1.70158
            }
            return c * (t /= d) * t * ((s + 1) * t - s) + b
        }, easeOut: function (t, b, c, d, s) {
            if (s == undefined) {
                s = 1.70158
            }
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
        }, easeInOut: function (t, b, c, d, s) {
            if (s == undefined) {
                s = 1.70158
            }
            if ((t /= d / 2) < 1) {
                return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
            }
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
        }
    }, Bounce: {
        easeIn: function (t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b
        }, easeOut: function (t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b
            } else {
                if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
                } else {
                    if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
                    }
                }
            }
        }, easeInOut: function (t, b, c, d) {
            if (t < d / 2) {
                return Tween.Bounce.easeIn(t * 2, 0, c, d) * 0.5 + b
            } else {
                return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
            }
        }
    }
};

function move(obj, json, options) {
    options = options || {};
    var duration = options.duration || 1000;
    var easing = options.easing || Tween.Linear;

    var start = {};
    var dis = {};
    var count = Math.floor(duration / 30);
    var n = 0;

    for (var key in json) {
        start[key] = parseFloat(getStyle(obj, key));
        dis[key] = json[key] - start[key];
    }

    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        n++;

        for (var key in json) {
            var cur = easing(n / count * duration, start[key], dis[key], duration);

            if (key == 'opacity') {
                obj.style.opacity = cur;
            }
            else {
                obj.style[key] = cur + 'px';
            }
        }

        if (n == count) {
            clearInterval(obj.timer);
            options.complete && options.complete();
        }
    }, 30);
}

15.getDis 获取两个物体中心点距离

/**
 *获取两个物体中心距离
 *@param obj1 obj
 *@param obj2 obj
 */

function getDis(obj1, obj2) {
    var x = getPos(obj1).left + obj1.offsetWidth / 2 - (getPos(obj2).left + obj2.offsetWidth / 2);
    var y = getPos(obj1).top + obj1.offsetHeight / 2 - (getPos(obj2).top + obj2.offsetHeight / 2);

    return Math.sqrt(x * x + y * y).toFixed(2);
}

16.addWheel(obj, fn)

/**
 *鼠标滚轮函数
 *@param obj obj
 *@param fn function
 */

function addWheel(obj, fn) {
    //加事件
    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
        obj.addEventListener('DOMMouseScroll', _wheel, false);
    }
    else {
        addEvent(obj, 'onmousewheel', _wheel);
    }

    function _wheel(ev) {
        var oEvent = ev || event;

        if (oEvent.wheelDelta) {
            var down = oEvent.wheelDelta < 0;
        }
        else {
            var down = oEvent.detail > 0;
        }

        fn(down);
    }
}

17.封装 enter 和 leave

/**
 *enter
 *@param obj obj
 *@param fn function
 */

function enter(obj, fn) {
    obj.onmouseover = function (ev) {
        var oEvent = ev || event;
        var oFrom = oEvent.fromElement || oEvent.relatedTarget;

        if (oFrom && obj.contains(oFrom)) {

        }
        else {
            fn();
        }
    };

}


/**
 *leave
 *@param obj obj
 *@param fn function
 */

function leave(obj, fn) {
    obj.onmouseout = function (ev) {
        var oEvent = ev || event;
        var oTo = oEvent.toElement || oEvent.relatedTarget;

        if (oTo && obj.contains(oTo)) {

        }
        else {
            fn();
        }
    };

}

18.ready

/**
 *ready
 *@param fn function
 */

function ready(fn) {
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fn, false);
    }
    else {
        document.onreadystatechange = function () {
            if (document.readyState == 'complete') {
                fn();
            }
        };
    }
}

19.完美拖拽

/**
 *完美拖拽
 *@param obj obj
 */

function drag(obj) {
    addEvent(obj, 'mousedown', function (ev) {
        var oEvent = ev || event;
        var disX = oEvent.clientX - obj.offsetWidth;
        var disY = oEvent.clientY - obj.offsetHeight;

        addEvent(document, 'mousemove', _move);
        addEvent(document, 'mouseup', _up);

        oEvent.preventDefault();
        obj.setCapture && obj.setCapture();

        function _move(ev) {
            var oEvent = ev || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;

            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
        }

        function _up() {
            removeEvent(document, 'mousemove', _move);
            removeEvent(document, 'mouseup', _up);
            obj.releaseCapture && obj.releaseCapture();
        }
    });
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,701评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,649评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,037评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,994评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,018评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,796评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,481评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,370评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,868评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,832评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,494评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2赞 356