简单的js工具库

function getStyle(eleObj, attr) {
    return eleObj.currentStyle ? eleObj.currentStyle[attr] : window.getComputedStyle(eleObj)[attr];
}
 // 判断滚轮的方向(兼容的处理)
 function whellEvent(ev) {
    //滚轮方向的
    //IE或谷歌  事件对象.wheelDelta  
    //往前滚 : 120  往后滚:-120  并且火狐不兼容  是undefined   
    // console.log(ev.wheelDelta);

    // 火狐下  ev.detail  
    // 往前滚 : -3  往后滚:3 
    // console.log(ev.detail);
    if (ev.wheelDelta) { //成立  IE 或 谷歌
        return ev.wheelDelta;
    } else { //火狐   
        return ev.detail * -40;
    }
} 
// //DOM2事件绑定的兼容处理  是IE独有的
// 元素对象.attachEvent('on' + eventType,callBakc);
function eventBind(eleObj, eventType, callBack, boolean) {
    if (eleObj.addEventListener) {
        eleObj.addEventListener(eventType, callBack, boolean);
    } else {
        eleObj.attachEvent('on' + eventType, callBack);
    }
}

 // DOM2事件取消事件绑定兼容处理
 function unEventBind(eleObj, eventType, callBack) {
    if (eleObj.removeEventListener) {
        eleObj.removeEventListener(eventType, callBack);
    } else {
        eleObj.detachEvent('on' + eventType, callBack);

    }
}
/*简单的匀速运动*/
function move(eleObj, attr, step, target, interval) {
    //清除定时器 (自定义属性的方式)
    window.clearInterval(eleObj.timer);
    //0 --- 1000  初始值   小于   目标值  step为正
    //1000 --- 0  初始值   小于   目标值  step为负
    //确定步长的正负
    //给step重新赋值
    step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
    //设置定时器
    eleObj.timer = window.setInterval(function () {
        // 获取每次去设置的值
        var speed = parseFloat(getStyle(eleObj, attr)) + step;
        if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
            // 设置为目标值
            speed = target;
            // 清除定时器
            window.clearInterval(eleObj.timer);
        }
        //设置样式值
        eleObj.style[attr] = speed + 'px';

    }, interval);
}


// 生成n-m之间的随机数
function getRandomNumber(n, m) {
    n = Number(n);
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {
        //TypeError   类型错误
        //RangeError  范围错误
        //ReferenceError 引用错误
        //SyntaxError  语法错误

        //手动抛出错误
        throw new TypeError("请输入数值");
    }

    // n > m
    if (n > m) {
        var temp; //临时变量
        temp = n;
        n = m;
        m = temp;
    }

    return Math.round(Math.random() * (m - n) + n);
}
/*
    补零
    @param time:时间
    @returns 补零后的字符串
*/
function zero(time) {
    return time < 10 ? "0" + time : time;
}


/* 
    冒泡排序:对数组进行排序 
    @param arr:数组
    @param bool:布尔值   true:升序  false:降序
    @returns arr
*/
function bubbleSort(arr, bool) {
    var flag = false;
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (bool ? arr[j] > arr[j + 1] : arr[j] < arr[j + 1]) {
                var temp;
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                flag = true;
            }
        }
        if (flag) {
            flag = false;
        } else {
            break;
        }
    }
    return arr;
}


/* 
    快速排序:对数组进行排序 
    @param arr:数组
    @returns arr
*/
function quickSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    var point = Math.floor(arr.length / 2);
    var pointValue = arr.splice(point, 1)[0];
    var left = [],
        right = [];
    for (var i = 0; i < arr.length; i++) {
        var cur = arr[i];
        cur < pointValue ? left.push(cur) : right.push(cur);
    }
    return quickSort(left).concat(pointValue, quickSort(right));
}



/* 
    数组去重:对数组进行去重 
    @param arr:数组
    @returns arr
*/
function arrNoRepeat(arr) {
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        var cur = arr[i];
        if (obj[cur] === cur) {
            arr[i] = arr[arr.length - 1];
            arr.length--;
            i--;
            continue;
        }
        obj[cur] = cur;
    }
    return arr;
}


/*
获取所有直接子元素(不传递标签名 就获取所有的直接子元素  传递进行过滤)
@param eleObj:元素对象
@param tagName:标签名 
@returns array  
*/
function getChildren(eleObj, tagName) {
    var nodes = eleObj.childNodes,
        arr = []; //存储获取到元素
    for (var i = 0; i < nodes.length; i++) {
        var curNode = nodes[i];
        // 不传递标签名 就获取所有的直接子元素  传递进行过滤
        if (typeof tagName === "undefined") {
            if (curNode.nodeType === 1) {
                arr.push(curNode);
            }
        } else {

            if ((curNode.nodeType === 1) && (curNode.nodeName.toUpperCase() === tagName.toUpperCase())) {
                arr.push(curNode);
            }
        }
    }
    return arr;
}


/*
获取第一个子元素
@param eleObj:元素对象 
@returns eleObj 
*/

function firtChild(eleObj) {
    return getChildren(eleObj).length != 0 ? getChildren(eleObj)[0] : null;
}


/*
获取第一个子元素
@param eleObj:元素对象 
@returns eleObj 
*/

function lastChild(eleObj) {
    return getChildren(eleObj).length != 0 ? getChildren(eleObj)[getChildren(eleObj).length - 1] : null;
}


/*
获取上一个哥哥元素
@param eleObj:元素对象 
@returns eleObj 
*/
function prev(eleObj) {
    var pre = eleObj.previousSibling;
    while (pre && pre.nodeType != 1) {
        pre = pre.previousSibling;
    }
    return pre;
}


/*
获取上一个弟弟元素
@param eleObj:元素对象 
@returns eleObj 
*/
function next(eleObj) {
    var nex = eleObj.nextSibling;
    while (nex && nex.nodeType != 1) {
        nex = nex.nextSibling;
    }
    return nex;
}


/*
获取所有的哥哥元素
@param eleObj:元素对象 
@returns array 
*/
function prveAll(eleObj) {
    var pre = prev(eleObj); //获取当前对象的哥哥元素 
    var arr = []; //返回数组的集合
    while (pre) {
        arr.unshift(pre);
        pre = prev(pre);
    }

    return arr;
}


/*
获取所有的弟弟元素
@param eleObj:元素对象 
@returns array 
*/
function nextAll(eleObj) {
    var nex = next(eleObj); //获取当前对象的哥哥元素 
    var arr = []; //返回数组的集合
    while (nex) {
        arr.push(nex);
        nex = next(nex);
    }

    return arr;
}


/*
获取上一个哥哥元素及下一个弟弟元素
@param eleObj:元素对象 
@returns array 
*/

function siblings(eleObj) {
    var arr = [];
    prev(eleObj) ? arr.push(prev(eleObj)) : null;
    next(eleObj) ? arr.push(next(eleObj)) : null;

    return arr;
}


/*
所有所有的相邻元素
@param eleObj:元素对象 
@returns array 
*/

function siblingsAll(eleObj) {
    return prveAll(eleObj).concat(nextAll(eleObj));
}

// 设置或获取浏览器的盒子模型  不传值就是获取  传递了就设置
function win(attr, value) {
    if (typeof value === "undefined") {
        return document.documentElement[attr] || document.body[attr];
    } else {
        document.documentElement[attr] = document.body[attr] = value;
    }
}

// function bufferMove(eleObj, attr, target, interval) {
//     // 防止多次点击重复设置定时器进来就清除掉
//     window.clearInterval(eleObj.timer);
//     // 设置定时器
//     eleObj.timer = window.setInterval(function () {
//         //先获取当前值
//         var cur = parseFloat(getStyle(eleObj, attr));
//         // 设置步长
//         var speed = (target - cur) / 10;
//         // 重新设置speed
//         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//         // 清除定时器
//         if (cur === target) {
//             window.clearInterval(eleObj.timer);
//         }
//         // 设置
//         eleObj.style[attr] = (cur + speed) + 'px';
//     }, interval);
// }
// 单独开启拖拽的元素
function drag(eleObj){
    eleObj.onmousedown=function(event){
        eleObj.setCapture && eleObj.setCapture();
        event = event || window.event;
        var x= event.clientX - eleObj.offsetLeft;
        var y = event.clientY -eleObj.offsetTop;
        document.onmousemove=function(event){
            event=event||window.event;
            var left=event.clientX-x;
            var top=event.clientY-y;
            eleObj.style.left=left+'px';
            eleObj.style.top=top+'px';
        }
        document.onmouseup=function(){
            releaseCapture&&releaseCapture();
            document.onmousemove=document.onmouseup=null;
        }
        /*
					 * 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
					 * 	此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
					 * 	如果不希望发生这个行为,则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
    }
}


// 开启拖拽,并点击实现倒放功能
function drag1(eleObj, eleObj1) {
    var arr = [{
        myLeft: parseFloat(getStyle(eleObj, 'left')), myTop: parseFloat(getStyle(eleObj, 'top'))
    }];
    eleObj.onmousedown = function (ev) {
        ev = ev || window.event;
        // ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        eleObj.setCapture && eleObj.setCapture();//设置box1捕获所有鼠标按下的事件
        var x = ev.clientX - eleObj.offsetLeft;
        var y = ev.clientY - eleObj.offsetTop;
        document.onmousemove = function (ev) {
            ev = ev || window.event;
            var left = ev.clientX - x;
            var top = ev.clientY - y;
            var minLeft = 0, maxLeft = win('clientWidth') - eleObj.offsetWidth;
            var minTop = 0, maxTop = win('clientHeight') - eleObj.offsetHeight;
            if (left <= minLeft) {
                left = minLeft;
            } else if (left >= maxLeft) {
                left = maxLeft;
            }
            if (top <= minTop) {
                top = minTop;

            } else if (top >= maxTop) {
                top = maxTop;
            }

            eleObj.style.left = left + 'px';
            eleObj.style.top = top + 'px';
            arr.push({ myLeft: left, myTop: top });
        }
        document.onmouseup = function () {
            eleObj.releaseCapture && eleObj.releaseCapture();
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
    eleObj1.onclick = function () {
        // 重新设置 box的left和top值
        window.clearInterval(timer);
        var timer = window.setInterval(function () {
            // 每次从数组末尾获取最后一项
            var curPos = arr.pop();
            //设置
            if (arr.length <= 0) { //最后一个坐标
                eleObj.style.left = curPos.myLeft + 'px';
                eleObj.style.top = curPos.myTop + 'px';

                //清除定时器
                window.clearInterval(timer);
            } else {
                eleObj.style.left = curPos.myLeft + 'px';
                eleObj.style.top = curPos.myTop + 'px';
            }
        }, 20);
    }
}
// 减速运动
function deMove(eleObj, attr, target, interval){
    window.clearInterval(eleObj.timer);
    eleObj.timer=window.setInterval(function(){
        var cur=parseFloat(getStyle(eleObj,attr));
        var speed=(target-cur)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(cur===target){
            clearInterval(eleObj.timer);
        }
        eleObj.style[attr]=cur+speed+'px';
    },interval);
}

  /*
减速运动
@param eleObj:元素对象 
@param styleObj:样式对象集合  属性:目标值
@param interval:事件间隔
@param callBack:回调函数
*/
function bufferMove(eleObj, styleObj, interval, callBack) {
    window.clearInterval(eleObj.timer);
    console.log("buffferMove")
    eleObj.timer = window.setInterval(function () {
        console.log("444")
        var flag = true; //默认值是true
        for (var styleAttr in styleObj) {
            var cur = styleAttr === "opacity" ? parseFloat(getStyle(eleObj, styleAttr) * 100) :
                parseFloat(
                    getStyle(
                        eleObj, styleAttr));
            var speed = (styleObj[styleAttr] - cur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (cur !== styleObj[styleAttr]) {
                flag = false;
            }

            if (styleAttr === "opacity") {
                eleObj.style.opacity = (cur + speed) / 100;
                eleObj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
            } else {
                eleObj.style[styleAttr] = (cur + speed) + 'px';
            }
        }

        if (flag) {
            window.clearInterval(eleObj.timer);
            console.log('5555');
            callBack && callBack();
        }
    }, interval);
}
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页