自己封裝的tools.js文件

/*
 * 生成指定范圍的隨機(jī)整數(shù)
 * @param lower 下限
 * @param upper 上限
 * @return 返回指定范圍的隨機(jī)整數(shù)，上/下限值均可取
 */
function random(lower, upper) {
  return Math.floor(Math.random() * (upper - lower)) + lower;
}
 
/*
 * 生成rgb隨機(jī)顏色值
 * @return 返回生成的rgb字符串："rgb(33,44,55)"
 */
function randomColor() {
  // 隨機(jī)生成 rgb 十進(jìn)制值
  var r = random(0, 255),
    g = random(0, 255),
    b = random(0, 255);
  // 串聯(lián)字符串，并返回
  return "rgb(" + r + "," + g + "," + b + ")";
}
/*
 * 將 URL 中查詢字符串轉(zhuǎn)換為對(duì)象
 * @param ul 待轉(zhuǎn)換的URL字符串
 */
function parseQueryString(url) {
  // 獲取 ? 與 # 的索引
  var start = url.indexOf("?"),
    end = url.indexOf("#");
 
  // 判斷是否有 ?
  if (start === -1)
    // 不存在，則返回 null
    return null;
  // 存在 ?，則起始索引從?后一位置開(kāi)始
  start += 1;
 
  // 判斷是否有 #
  if (end === -1)
    // 不存在，則截取到字符串末尾
    end = url.length;
 
  // 獲取查詢字符串
  var queryString = url.slice(start, end);
 
  // 使用 & 符號(hào)將查詢字符串分割
  queryString = queryString.split("&");
  var result = {}; // 保存解析后的對(duì)象
  // 遍歷迭代數(shù)組中每個(gè)元素
  for (var i = 0, len = queryString.length; i < len; i++) {
    // 將當(dāng)前數(shù)組中遍歷到的 "key=value" 以 = 分割
    var parts = queryString[i].split("=");
    result[parts.shift()] = parts.shift();
  }
  // 將解析報(bào)的對(duì)象返回
  return result;
}
/*
 * 將對(duì)象轉(zhuǎn)換為查詢字符串
 * @param obj 對(duì)象
 * @return 查詢字符串 key=value&key=value&key=value
 */
function toQueryString(obj) {
  // 定義變量保存轉(zhuǎn)換結(jié)果
  var result = [];
  // 遍歷迭代對(duì)象各屬性
  for (var attr in obj) {
    result.push(attr + "=" + obj[attr]);
  }
  // 返回連接后的查詢字符串
  return result.join("&");
}
/*
 * 格式化日期時(shí)間：yyyy-MM-dd HH:mm:ss
 * @param datetime 待格式化日期時(shí)間對(duì)象
 * @return 格式化后的字符串：yyyy-MM-dd HH:mm:ss
 */
function format(datetime) {
  var year = datetime.getFullYear(),
    month = ("0" + (datetime.getMonth() + 1)).slice(-2),
    date = ("0" + datetime.getDate()).slice(-2),
    hour = ("0" + datetime.getHours()).slice(-2),
    min = ("0" + datetime.getMinutes()).slice(-2),
    sec = ("0" + datetime.getSeconds()).slice(-2);
  return year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + sec;
}
/*
*封裝獲取指定DOM元素的函數(shù)
*/
function $(selector) {
  var strs = selector.split(" "); //通過(guò)空格切割傳遞的字符串
  var result = document.getElementsByTagName("html"); //獲取最外層的dom元素
  for (var i = 0, len = strs.length; i < len; i++) {
    //根據(jù)傳過(guò)來(lái)的字符串，一層一層的遍歷查找dom
    if (strs[i].charAt(0) === "#") {
      //如果是id，返回的是dom元素
      result = document.getElementById(strs[i].slice(1));
    } else if (strs[i].charAt(0) === ".") {
      //如果是class，則返回的是一個(gè)偽數(shù)組（集合），需要加一個(gè)下標(biāo)，才能獲得dom
      result = byClass(strs[i].slice(1), result[0]);
    } else {
      //如果是tagName
      if (i === 0)
        //代表傳遞的字符串只有一個(gè)tagName，
        result = result[0].getElementsByTagName(strs[i]);
      else if (strs[i - 1].charAt(0) === "#")
        //代表上一個(gè)是id，返回的是dom，可以直接調(diào)用
        result = result.getElementsByTagName(strs[i]);
      //代表上一個(gè)是class或者tagName，返回的是集合，需要加下標(biāo)
      else result = result[0].getElementsByTagName(strs[i]);
    }
  }
  return result;
}
/*
 * 解決 document.getElementsByClassName 瀏覽器兼容問(wèn)題
 * @param className 類(lèi)名
 * @param context 查詢上下文
 * @return 返回查找到的元素集合
 */
function byClass(className, context) {
  // 默認(rèn)在整個(gè)文檔中查詢
  context = context || document;
  // 支持使用 getElementsByClassName 方法，則直接調(diào)用
  if (context.getElementsByClassName)
    return context.getElementsByClassName(className);
  // 不支持使用 getElementsByClassName 方法，解決兼容
  var result = []; // 保存所有查找到的元素
  // 查找查詢上下文環(huán)境中所有元素
  var elements = context.getElementsByTagName("*");
  // 遍歷所有元素，判斷每個(gè)元素的類(lèi)名
  for (var i = 0, len = elements.length; i < len; i++) {
    // 將當(dāng)前遍歷到元素的類(lèi)名存入數(shù)組中
    var classNames = elements[i].className.split(" ");
    // 遍歷數(shù)組中的元素，判斷是否存在待查找的類(lèi)名
    for (var j = 0, l = classNames.length; j < l; j++) {
      if (classNames[j] === className) {
        result.push(elements[i]);
        break;
      }
    }
  }
  // 返回查找結(jié)果
  return result;
}
/*





*添加監(jiān)聽(tīng)事件
*/
function on(element, type, callback) {
  if (element.addEventListener) {
    if (type.charAt("on") === 0) type = type.slice(2);
    element.addEventListener(type, callback, false);
  } else {
    if (type.charAt("on") !== 0) type = "on" + type;
    element.attachEvent(type, callback);
  }
}
/*
*刪除監(jiān)聽(tīng)事件
*/
function off(element, type, callback) {
  if (element.removeEventListener) {
    if (type.charAt("on") === 0) type = type.slice(2);
    element.removeEventListener(type, callback, false);
  } else {
    if (type.charAt("on") !== 0) type = "on" + type;
    element.detachEvent(type, callback);
  }
}
/*
*獲取設(shè)置CSS樣式
*/
function css(element, attr, value) {
  if (typeof attr === "object") {
    //設(shè)置樣式
    for (var i in attr) {
      element.style[i] = attr[i];
    }
    return;
  }
  //查詢樣式
  if (typeof value === "undefined") {
    return window.getComputedStyle
      ? window.getComputedStyle(element)[attr]
      : element.currentStyle[attr];
  }
  //設(shè)置
  element.style[attr] = value;
}
/*
*顯示元素
*/
function show(element) {
  element.style.display = "block";
}
/*
*隱藏元素
*/
function hide(element) {
  element.style.display = "none";
}
/*
*獲取元素在文檔中的定位坐標(biāo)
*/
function offset(element) {
  var _top = 0,
    _left = 0;
  while (element !== null) {
    _top += element.offsetTop;
    _left += element.offsetLeft;
    element = element.offsetParent;
  }
  return {
    top: _top,
    left: _left
  };
}
/*
*查詢保存cookie
*/
function cookie(key, value, options) {
  //writing
  if (typeof value !== "undefined") {
    //傳入有具體的value值,此時(shí)執(zhí)行cookie保存操作
    var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    //判斷可配置項(xiàng)
    options = options || {};
    if (options.expires) {
      //如果有有效時(shí)間
      var datetime = new Date();
      datetime.setDate(datetime.getDate() + options.expires);
      cookie += ";expires=" + datetime.toUTCString();
    }
    // 有路徑
    if (options.path) cookie += ";path=" + options.path;
    // 有域
    if (options.domain) cookie += ";domain=" + options.domain;
    // 有安全配置
    if (options.secure) cookie += ";secure";
    // 保存cookie
    document.cookie = cookie;
    return;
  }
  //reading
  // 讀取域下所有 cookie ("key=value") 放到數(shù)組中保存
  var cookies = document.cookie.split("; ");
  // 遍歷迭代數(shù)組元素
  for (var i = 0, len = cookies.length; i < len; i++) {
    // 當(dāng)前cookie以 "=" 分割
    var parts = cookies[i].split("=");
    // 第一個(gè)=號(hào)前的是cookie名，剩余元素以=連接作為cookie值
    var name = decodeURIComponent(parts.shift());
    // cookie名是否為待查找的名稱
    if (name === key) {
      // 將value解碼
      var value = decodeURIComponent(parts.join("="));
      // 返回查找到的 cookie 值
      return value;
    }
  }
  // 不能查找到，則返回 undefined
  return undefined;
}
/*
 * 刪除cookie
 * @param key cookie名
 * @param options 可配置項(xiàng)
 */
function removeCookie(key, options) {
    options = options || {};
    options.expires = -1;
    cookie(key, "", options);
}
/*
*封裝動(dòng)畫(huà)動(dòng)作函數(shù)
*@param element 需要添加動(dòng)畫(huà)的dom元素
*@param options 需要改變的屬性以及值
*@param speed 動(dòng)畫(huà)的時(shí)間
*@param fn 動(dòng)畫(huà)結(jié)束執(zhí)行的函數(shù)
*/
function animate(element,options,speed,fn){
  // 清除element前面的計(jì)時(shí)器
  clearInterval(element.timer);
  // 獲取屬性的初始值以及運(yùn)動(dòng)的總距離
  var start = {}, _range = {};
  for(var attr in options){
    start[attr] = parseFloat(css(element,attr));
    _range[attr] = options[attr]-start[attr];
  }
  // 獲取點(diǎn)擊按鈕的時(shí)候的當(dāng)前時(shí)間
  var nowTime = +new Date();
  // 啟動(dòng)計(jì)時(shí)器進(jìn)行動(dòng)畫(huà)的運(yùn)動(dòng)
  element.timer = setInterval(function(){
    // 獲取定時(shí)器運(yùn)行的時(shí)候的時(shí)間與初始點(diǎn)擊的時(shí)間的差值
    var dataTime = Math.min(+new Date()-nowTime,speed);
    for(var attr in options){
      result = dataTime * _range[attr]/speed + start[attr];
      if(attr === "width" || attr === "height" || attr === "bottom" || attr === "right" || attr === "left" || attr === "top")
        element.style[attr] = result + "px";
      else
        element.style[attr] = result;
    }
    if(dataTime === speed){
      clearInterval(element.timer);
      fn && fn();
    }
  },1000/60);
}
/* 淡入 */
function fadeIn(element,speed,fn){
    element.style.display = "block";
    element.style.opacity = 0;
    animate(element,{opacity:1},speed,fn);
}
/* 淡出 */
function fadeOut(element,speed,fn){
  animate(element,{opacity:0},speed,function(){
    element.style.display = "none";
  });
}


歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端