JS---涉及到的common.js-有解無憂


//格式化日期的代碼
//獲取指定標簽物件
//獲取元素的文本內容
//獲取元素的文本內容
//獲取父級元素中的第一個子元素
//獲取父級元素中的最后一個子元素
//獲取某個元素的前一個兄弟元素
//獲取某個元素的后一個兄弟元素
//獲取某個元素的所有兄弟元素
//回傳當前瀏覽器是什么型別的瀏覽器
//為任意一個元素系結事件:元素,事件型別,事件處理函式
//為任意的一個元素解綁某個事件:元素,事件型別,事件處理函式
//獲取頁面向上或者向左卷曲出去的距離的值
//變速（緩動）影片函式
//勻速影片函式
//變速影片函式封裝增加任意多個屬性和回掉函式及層級和透明度
//圖片跟著滑鼠飛的最終版本代碼

/**
 * 格式化日期
 * @param dt 日期物件
 * @returns {string} 回傳值是格式化的字串日期
 */
function getDates(dt) {
    var str = "";//存盤時間的字串
    //獲取年
    var year = dt.getFullYear();
    //獲取月
    var month = dt.getMonth() + 1;
    //獲取日
    var day = dt.getDate();
    //獲取小時
    var hour = dt.getHours();
    //獲取分鐘
    var min = dt.getMinutes();
    //獲取秒
    var sec = dt.getSeconds();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
    return str;
}
/**
 * 獲取指定標簽物件
 * @param id 標簽的id屬性值
 * @returns {Element}根據id屬性值回傳指定標簽物件
 */
function my$(id) {
    return document.getElementById(id);
}

function setInnerText(element, text) {
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
/**
 * 獲取元素的文本內容
 * @param element 任意元素
 * @returns {*} 任意元素中的文本內容
 */
function getInnerText(element) {
    if (typeof (element.textContent) == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
/**
 * 獲取父級元素中的第一個子元素
 * @param element 父級元素
 * @returns {*} 父級元素中的子級元素
 */
function getFirstElement(element) {
    if (element.firstElementChild) {
        return element.firstElementChild;
    } else {
        var node = element.firstChild;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 獲取父級元素中的最后一個子元素
 * @param element 父級元素
 * @returns {*} 最后一個子元素
 */
function getLastElement(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 獲取某個元素的前一個兄弟元素
 * @param element 某個元素
 * @returns {*} 前一個兄弟元素
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling
    } else {
        var node = element.previousSibling;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}
/**
 * 獲取某個元素的后一個兄弟元素
 * @param element 某個元素
 * @returns {*} 后一個兄弟元素
 */
function getNextElement(element) {
    if (element.nextElementSibling) {
        return element.nextElementSibling
    } else {
        var node = element.nextSibling;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}
/**
 * 獲取某個元素的所有兄弟元素
 * @param element 某個元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element) return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
/**
 * 回傳當前瀏覽器是什么型別的瀏覽器
 */
function userBrowser() {
    var browserName = navigator.userAgent.toLowerCase();
    if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
        console.log("IE");
    } else if (/firefox/i.test(browserName)) {
        console.log("Firefox");
    } else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
        console.log("Chrome");
    } else if (/opera/i.test(browserName)) {
        console.log("Opera");
    } else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
        console.log("Safari");
    } else {
        console.log("不知道什么鬼!");
    }
}



//為任意一個元素系結事件:元素,事件型別,事件處理函式
function addEventListener(element, type, fn) {
    if (element.addEventListener) {
        //支持
        element.addEventListener(type, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, fn);
    } else {
        element["on" + type] = fn;
    }
}
//為任意的一個元素解綁某個事件:元素,事件型別,事件處理函式
function removeEventListener(element, type, fn) {
    if (element.removeEventListener) {
        element.removeEventListener(type, fn, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, fn);
    } else {
        element["on" + type] = null;
    }
}

//設定任意的一個元素,移動到指定的目標位置

    //設定任意的一個元素,移動到指定的目標位置
    function animate(element, target) {
      clearInterval(element.timeId);
      //定時器的id值存盤到物件的一個屬性中
      element.timeId = setInterval(function () {
        //獲取元素的當前的位置,數字型別
        var current = element.offsetLeft;
        //每次移動的距離
        var step = 10;
        step = current < target ? step : -step;
        //當前移動到位置
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定時器
          clearInterval(element.timeId);
          //直接到達目標
          element.style.left = target + "px";
        }
      }, 20);
    }

      //變速影片函式

      function animate(element, target) {
        //清理定時器
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
          //獲取元素的當前位置
          var current = element.offsetLeft;
          //移動步數
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;
          element.style.left = current + "px";
          if (current == target) {
            //清理定時器
            clearInterval(element.timeId);
          }
          //測驗代碼
          console.log("目標位置:" + target + "，當前位置:" + current + "，步數:" + step);
        }, 20);
      }

    //勻速影片函式
    function animate(element, target) {
      //清理定時器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //獲取元素的當前位置
        var current = element.offsetLeft;
        //移動的步數
        var step = 10;
        step = target > current ? step : -step;
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          clearInterval(element.timeId);
          element.style.left = target + "px";
        }
      }, 20);
    }

    //獲取任意一個元素的任意一個樣式屬性的值
    function getStyle(element, attr) {
      //判斷瀏覽器是否支持這個方法
      return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }

//點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值

  //獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }


  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定時器
    //定時器,回傳的是定時器的id
    element.timeId = setInterval(function () {
      var flag = true;//默認,假設,全部到達目標
      //遍歷json物件中的每個屬性還有屬性對應的目標值
      for (var attr in json) {
        //判斷這個屬性attr中是不是opacity
        if (attr == "opacity") {
          //獲取元素的當前的透明度,當前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目標的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移動后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判斷這個屬性attr中是不是zIndex
          //層級改變就是直接改變這個屬性的值
          element.style[attr] = json[attr];
        } else {
          //普通的屬性
          //獲取元素這個屬性的當前的值
          var current = parseInt(getStyle(element, attr));
          //當前的屬性對應的目標值
          var target = json[attr];
          //移動的步數
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移動后的值
          element.style[attr] = current + "px";
        }
        //是否到達目標
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定時器
        clearInterval(element.timeId);
        //所有的屬性到達目標才能使用這個函式,前提是用戶傳入了這個函式
        if (fn) {
          fn();
        }
      }
      //測驗代碼
      console.log("目標:" + target + ",當前:" + current + ",每次的移動步數:" + step);
    }, 20);
  }

var evt = {
      //window.event和事件引數物件e的兼容
      getEvent: function (evt) {
        return window.event || evt;
      },
      //可視區域的橫坐標的兼容代碼
      getClientX: function (evt) {
        return this.getEvent(evt).clientX;
      },
      //可視區域的縱坐標的兼容代碼
      getClientY: function (evt) {
        return this.getEvent(evt).clientY;
      },
      //頁面向左卷曲出去的橫坐標
      getScrollLeft: function () {
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
      },
      //頁面向上卷曲出去的縱坐標
      getScrollTop: function () {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
      },
      //相對于頁面的橫坐標(pageX或者是clientX+scrollLeft)
      getPageX: function (evt) {
        return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
      },
      //相對于頁面的縱坐標(pageY或者是clientY+scrollTop)
      getPageY: function (evt) {
        return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
      }
    };
    //最終的代碼

    document.onmousemove = function (e) {
      my$("im").style.left = evt.getPageX(e) + "px";
      my$("im").style.top = evt.getPageY(e) + "px";
    };

    //獲取頁面向上或者向左卷曲出去的距離的值
    function getScroll() {
      return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      };
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164085.html

標籤：JavaScript

上一篇：JS---DOM---案例：模擬百度搜索框

下一篇：JS---BOM基本知識 (頂級物件，系統對話框，加載事件，location物件, history物件, navigator物件)