簡單的js工具庫

毛默默不吃魚發表於2020-10-25
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);
}

相關文章