美文网首页
js-常用函数common.js

js-常用函数common.js

作者: 萝卜缨女王 | 来源:发表于2020-09-17 09:39 被阅读0次

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();
        }
    });
}

相关文章

  • js-常用函数common.js

    1.rnd 2.toDub 3.setStyle 4.getStyle 5.getByClass 6.getPos...

  • 常用Common.js工具库备份

    常用Common.js工具库备份

  • js-数组常用函数

    在这里总结一下JS的数组方法： 1、join()Array.join()方法将数组中所有元素都转化为字符串并连接在...

  • 之前写的jq的公共方法，一些常用内容合集

    之前写的，使用jq作为基础写的common.js，里面包含了一些常用方法，函数，有详细的解释

  • vue全局定义防抖函数和节流函数

    防抖函数 在common.js中 引入到vue组件中 import{debounce,}from"@/assets...

  • JS-函数

    事件驱动模型： 事件(操作，动作) 事件类型（具体的动作类型） 事件源（发生动作的地方） 事件监听器（监听事件发生...

  • JS-函数

    1.定义（1）匿名函数（2）具名函数（3）箭头函数，无this 词法作用域（也叫静态作用域）JS看到上面的代码不是...

  • JS-函数

    1.函数基础 函数参数 函数写法：function func(){}var func=function(){}经常...

  • JS-函数

    函数1.声明 function 函数名(参数1,参数2...){ 函数体 retur...

  • js-函数

    函数

网友评论

      本文标题：js-常用函数common.js

      本文链接：https://www.haomeiwen.com/subject/wrwfyktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|js-常用函数common.js|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！