js常用函数总结

2017-08-31 本文已影响0人谁抢了我的麋鹿

本文首发于我的博客

常用工具函数
常用例子

常用工具函数

Array

js删除数组指定item

Array.prototype.removeByValue = function (val) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == val) {
      this.splice(i, 1);
      break;
    }
  }
}

js删除指定index的item

Array.prototype.remove = function (dx) {
  if (isNaN(dx) || dx > this.length) {
    return false;
  }
  for (var i = 0, n = 0; i < this.length; i++) {
    if (this[i] != this[dx]) {
      this[n++] = this[i]
    }
  }
  this.length -= 1
}

递归遍历数组成员并输出


//函数 printArray 使用了递归方式，逐一输出数组中的每个成员，中间以空格隔开。
//@arr ：应是数组类型
function printArray(arr) {
  for (var i in arr) {
    if (arr[i] instanceof Array) {
      printArray(arr[i]);
    } else {
      document.write(arr[i] + '');
    }
  }
}

JS插入排序

//此方法排序从小到大
//@arr ：应是数组类型

function insertionSort(arr) {
  //从第二个元素开始
  for (var i = i; i < arr.length; i++) {
    //取出待比较的元素
    var k = arr[i];
    //像前找，找到比当前元素大的位置
    var j;
    for (j = i - 1; j >= 0 && k < arr[j]; j--) {
      //向后移动一位
      arr[j + 1] = arr[j];
    }
    //插入元素
    arr[j + 1] = k;
  }
}

BOM

判断浏览器

function getOs() {
  if (navigator.userAgent.indexOf("MSIE 8.0") > 0) {
    return "MSIE8";
  } else if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
    return "MSIE6";
  } else if (navigator.userAgent.indexOf("MSIE 7.0") > 0) {
    return "MSIE7";
  } else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
    return "Firefox";
  }
  if (navigator.userAgent.indexOf("Chrome") > 0) {
    return "Chrome";
  } else {
    return "Other";
  }
}

手机类型判断

var BrowserInfo = {
  userAgent: navigator.userAgent.toLowerCase(),
  isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
  isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
  isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
  isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
}

获取当前js的版本

function getjsversion() {
  var n = navigator;
  var u = n.userAgent;
  var apn = n.appName;
  var v = n.appVersion;
  var ie = v.indexOf('MSIE ');
  if (ie > 0) {
    apv = parseInt(i = v.substring(ie + 5));
    if (apv > 3) {
      apv = parseFloat(i);
    }
  } else {
    apv = parseFloat(v);
  }
  var isie = (apn == 'Microsoft Internet Explorer');
  var ismac = (u.indexOf('Mac') >= 0);
  var javascriptVersion = "1.0";
  if (String && String.prototype) {
    javascriptVersion = '1.1';
    if (javascriptVersion.match) {
      javascriptVersion = '1.2';
      var tm = new Date;
      if (tm.setUTCDate) {
        javascriptVersion = '1.3';
        if (isie && ismac && apv >= 5) javascriptVersion = '1.4';
        var pn = 0;
        if (pn.toPrecision) {
          javascriptVersion = '1.5';
          a = new Array;
          if (a.forEach) {
            javascriptVersion = '1.6';
            i = 0;
            o = new Object;
            tcf = new Function('o', 'var e,i=0;try{i=new Iterator(o)}catch(e){}return i');
            i = tcf(o);
            if (i && i.next) {
              javascriptVersion = '1.7';
            }
          }
        }
      }
    }
  }
  return javascriptVersion;
}

判断浏览器是否支持CSS3属性

/**
 * 判断是否支持css3
 * 
 * @param {string} style CSS属性
 * @returns 
 */
function supportCss3(style) {
    var prefix = ['webkit', 'Moz', 'ms', 'o'],
        i,
        humpString = [],
        htmlStyle = document.documentElement.style,
        _toHumb = function (string) {
            return string.replace(/-(\w)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
        };

    for (i in prefix)
        humpString.push(_toHumb(prefix[i] + '-' + style));

    humpString.push(_toHumb(style));

    for (i in humpString)
        if (humpString[i] in htmlStyle) return true;

    return false;
}

阻止事件冒泡

//@e ：事件对象
function stopPP(e) {
  var evt = e || window.event;
  //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
  evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
}

加入收藏

/**
 * 加入收藏
 * 
 * @param {String} sURL 
 * @param {any} sTitle 
 */
function AddFavorite(sURL, sTitle) {
  sURL = encodeURI(sURL);
  try {
    window.external.addFavorite(sURL, sTitle);
  } catch (e) {
    try {
      window.sidebar.addPanel(sTitle, sURL, "");
    } catch (e) {
      alert("加入收藏失败");
    }
  }
}

实现设为首页

/**
 * 实现设为首页
 * 
 * @param {String} url 
 */
function SetHome(url) {
  if (document.all) {
    document.body.style.behavior = 'url(#default#homepage)';
    document.body.setHomePage(url);
  } else {
    alert("设为首页失败");
  }
}

String

JS 替换非法字符主要用在密码验证上出现的特殊字符

function URLencode(sStr) {
  return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F');
};

Js 去掉空格方法

String.prototype.Trim = function () {
  return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function () {
  return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function () {
  return this.replace(/(\s*$)/g, "");
}

字符串截取方法

function getCharactersLen(charStr, cutCount) {
  if (charStr == null || charStr == '') return '';
  var totalCount = 0;
  var newStr = '';
  for (var i = 0; i < charStr.length; i++) {
    var c = charStr.charCodeAt(i);
    if (c < 255 && c > 0) {
      totalCount++;
    } else {
      totalCount += 2;
    }
    if (totalCount >= cutCount) {
      newStr += charStr.charAt(i);
      break;
    } else {
      newStr += charStr.charAt(i);
    }
  }
  return newStr;
}

求一个字符串长度

//@  str：传入一个字符串返回该字符串的长度
//PS：假设一个中文占两个字节，一个英文占用一个字节
function getBytes(str) {
  var len = str.length,
    //假如全英文字符串则代表字节长度与字符串长度相同
    bytes = len,
    i = 0;
  //循环遍历字符串获取相对应的Unicode 编码，
  for (i = 0; i < len; i++) {
    if (str[i].charCodeAt() > 255) {
      bytes++;
    }
  }
  return bytes;
}

js实现解析URL参数，返回一个对象

/**
 * js实现解析URL参数， 返回一个对象
 * 
 * @param {String} url 传入一个地址串，例如"http://www.baidu.com/index.php?key=0&key=1&key=2”
 * @returns 
 */
function parseQuerystring(url) {
  var params = {}, //声明一个数组来存放返回的对象
    arr = url.split('?'); //将url地址与参数分割开来
  if (arr.length <= 1) { //如果没有参数则代表arr.length长度<=1
    return params;
  }
  arr = arr[1].split('&'); //解析后面的参数并返回数组
  //循环遍历arr数组
  for (var i = 0, l = arr.length; i < l; i++) {
    var a = arr[i].split('=');
    params[a[0]] = a[1]; //将分割后的参数以键值对形式存入params
  }
  return params;
}

function GetQueryStringRegExp(name, url) {
  var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
  if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " "));
  return "";
}

Date

JS判断两个日期大小适合 2012 - 09 - 09 与2012 - 9 - 9 两种格式的对比

//得到日期值并转化成日期格式，replace(/\-/g, "\/")是根据验证表达式把日期转化成长日期格式，这样再进行判断就好判断了
function ValidateDate() {
  var beginDate = $("#t_datestart").val();
  var endDate = $("#t_dateend").val();
  if (beginDate.length > 0 && endDate.length > 0) {
    var sDate = new Date(beginDate.replace(/\-/g, "\/"));
    var eDate = new Date(endDate.replace(/\-/g, "\/"));
    if (sDate > eDate) {
      alert('开始日期要小于结束日期');
      return false;
    }
  }
}

获取当前时间

function GetCurrentDate() {
  var d = new Date();
  var y = d.getYear() + 1900;
  month = add_zero(d.getMonth() + 1),
    days = add_zero(d.getDate()),
    hours = add_zero(d.getHours());
  minutes = add_zero(d.getMinutes()),
    seconds = add_zero(d.getSeconds());
  var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;

  function add_zero(temp) {
    if (temp < 10){
      return "0" + temp;
    }
    return temp;
  }
  return str;
};

获取前num天的日期

/**
 * 公有方法：获取前num天的日期
 * 
 * @param {Number} num 自动向上取整 
 * @param {boolean} order true是日期从大到小，false是从小到大 
 * @returns MM-dd
 */
function getTodayDate(num, order = false) {
  debugger
  num = Math.ceil(num)
  let arr_Date = []
  for (var i = 0; i < num; i++) {
    let date = new Date(new Date().getTime() - (i * 24 * 60 * 60 * 1000))
    let currMonth = new Date(date).getMonth() + 1
    let currDay = new Date(date).getDate()
    let result = `${currMonth.toString().length < 2 ? `0${currMonth}` : currMonth}-${currDay.toString().length < 2 ? `0${currDay}` : currDay}`;
    if (order) {
      arr_Date.push(result);
    } else {
      arr_Date.unshift(result);
    }
  }
  // console.log(arr_Date);
  return arr_Date;
}
console.log(getTodayDate(7));

DOM

增加/移除事件

var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){//检测是否存在DOM2
            element.addEventListener(type,handler,false)
        }else if(element.attachEvent){//存在ie
            element.attachEvent('on'+type,handler)
        }else{//DOM0
            element['on'+type]=handelr;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;
        }
    }
}

//使用
var btn = document.getElementById('myBtn');
var handler = function(){
    console.log('hi')
}
EventUtil.addHandler(btn,'click',handler);

EventUtil.removeHandler(btn,'click',handler);

js实时计算rem,宽度大于1920px时1rem=100px

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 1920) {
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

绑定按钮回车触发单机事件

$("id").onkeypress = function (event) {
  event = (event) ? event : ((window.event) ? window.event : "")
  keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
  if (keyCode == 13) {
    $("SubmitLogin").onclick();
  }
}

按Ctrl + Entert 直接提交表单

document.body.onkeydown = function (evt) {
  evt = evt ? evt : (window.event ? window.event : null);
  if (13 == evt.keyCode && evt.ctrlKey) {
    evt.returnValue = false;
    evt.cancel = true;
    PostData();
  }
};

全选 / 全不选

function selectAll(objSelect) {
  if (objSelect.checked == true) {
    $("input[name='chkId']").attr("checked", true);
    $("input[name='chkAll']").attr("checked", true);
  } else if (objSelect.checked == false) {
    $("input[name='chkId']").attr("checked", false);
    $("input[name='chkAll']").attr("checked", false);
  }
}

原生JS获取鼠标XY轴的值

/**
 * 原生JS获取鼠标XY轴的值
 * 
 * @param {Object} evt 
 * @returns 
 */
function mousePosition(evt) {
  evt = evt || window.event;
  //Mozilla
  if (evt.pageX || evt.pageY) {
    return {
      x: evt.pageX,
      y: evt.pageY
    }
  }
  //IE
  return {
    x: evt.clientX + document.body.scrollLeft - document.body.clientLeft,
    y: evt.clientY + document.body.scrollTop - document.body.clientTop
  }
}

//获取X轴坐标
function getX(evt) {
  evt = evt || window.event;
  return mousePosition(evt).x;
}

//获取Y轴坐标
function getY(evt) {
  evt = evt || window.event;
  return mousePosition(evt).y;
}

//外部函数调用1
document.getElementById("x").onclick = function (evt) {
  alert(getX(evt))
}

//外部函数调用2
function showXY(evt) {
  evt = evt || window.event;
  document.getElementById("n").innerHTML = "" + getX(evt);
}
window.onload = function () {
  document.body.onmousemove = showXY;
}

1.在IE中，event对象是全局的，它被存储在window.event中，对于Firefox，及其他的浏览器来说，这个事件将被传递到任何指向这个页面动作的函数中。可以通过传递参数获取。

2.document.body.scrollTop是网页被卷去的高，具有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop ，否则取不到值。

3.Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500500的窗口，并且鼠标位于窗口中间，那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素，pageY的值为750。如此相反的是，微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置，而不是当前document文档。在相同的例子中，如果将鼠标放置于500500窗口的中间，clientX和clientY值将均为250。如果向下滚动页面，clientY将仍为250，因为它是相对于window窗口来测量，而不是当前的document文档。因此，在鼠标位置中，我们应该引入document文档body区域的scrollLeft和scrollTop属性。最后，IE中document文档实际并不在(0,0)的位置，在它周围有一个小（通常有2px）边框，document.body.clientLeft和document.body.clientTop包含了这个边框的宽度。所有用

evt.clientX + document.body.scrollLeft - document.body.clientLeft //在IE中获得

JS实现添加事件兼容函数

/**
 * 公有函数:"事件处理"兼容函数
 *
 * @param {Object} evnentObj      需要添加事件的对象
 * @param {String} eventType      添加触发事件的类型，如click，不需要加on
 * @param {function} fn           事件函数
 * @param {Boolean} useCapture
 */
function addEvent(evnentObj, eventType, fn, useCapture) {
  if (evnentObj.addEventListener) {
    evnentObj.addEventListener(eventType, fn, false, useCapture); //DOM 2.0
  } else if (evnentObj.attachEvent) {
    evnentObj.attachEvent('on' + eventType, fn); //IE5+
  } else {
    evnentObj['on' + eventType] = fn; //DOM 0.0
  }
}

JS获取某元素以浏览器左上角为原点的坐标(有问题)

/**
 * 公有函数:获取某元素以浏览器左上角为原点的坐标
 *
 * @param {Object} obj
 * @returns
 */
function getPoint(obj) {
  var top = obj.offsetTop; //获取该元素对应父容器的上边距
  var left = obj.offsetLeft; //对应父容器的上边距
  var objPoint = {};
  //判断是否有父容器，如果存在则累加其边距
  while (obj = obj.offsetParent) {
    top += obj.offsetTop;
    left += obj.offsetLeft;
  }
  objPoint.top = top;
  objPoint.left = left;

  return objPoint;
}

JS获取鼠标X.Y轴坐标

function mousePosition(evt) {
  evt = evt || window.event;
  //Mozilla
  if (evt.pageX || evt.pageY) {
    return {
      x: evt.pageX,
      y: evt.pageY
    }
  }
  //IE
  return {
    x: evt.clientX + document.body.scrollLeft - document.body.clientLeft,
    y: evt.clientY + document.body.scrollTop - document.body.clientTop
  }
}

Object

js实现对象的深Clone

//PS:深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。
function cloneObject(o) {
  //首先对传入的对象进行类型判断，
  if (!o || "object" !== typeof o) {
    return o;
  }
  var c = "function" === typeof o.pop ? [] : {};
  var p, v;
  for (p in o) {
    if (o.hasOwnProperty(p)) {
      v = o[p];
      if (v && 'object' === typeof v) {
        c[p] = Ext.ux.clone(v);
      } else {
        c[p] = v;
      }
    }
  }
  return c;
};

Math

JS 生成范围随机整数

// JS 生成范围随机整数
/**
 * 生成从minNum到maxNum的随机整数
 * @param {number} minNum 
 * @param {number} maxNum 
 * @param {boolean} [status=true] 生成整数 false生成小数
 * @returns 
 */
function randomNum(minNum, maxNum, status = true) {
  let result;
  console.log(arguments.length);
  switch (arguments.length) {
    case 1:
      result = parseInt(Math.random() * minNum + 1, 10);
      break
    case 2:
      result = parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      break
    case 3:
      if (status) {
        result = parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        break
      } else {
        result = Math.random() * (maxNum - minNum + 1) + minNum;
        break
      }
    default:
      result = 0;
      break
  }
  return result;
}

XML

转成XML对象


 /**
  * 转成XML对象
  * 
  * @param {String} str 一个xml格式的串
  * @returns 
  */
function createXml(str) {
  if (document.all) {
    var xmlDom = new ActiveXObject("Microsoft.XMLDOM")
    xmlDom.loadXML(str)
    return xmlDom
  }
  else
    return new DOMParser().parseFromString(str, "text/xml")
}

常用例子

格式化数字串

/**
 * 格式化数字串
 * @param {String} str 源字符串
 * @param {Number} size 每隔几个字符进行分割 默认3
 * @param {String} delimiter delimiter-分割符 默认','
 */
function formatText(str, size = 3, delimiter = ',') {
    let _str = str.toString(),
        regText = '\\d{1,' + size + '}(?=(\\d{' + size + '})+$)',
        reg = new RegExp(regText, 'g');

    return _str.replace(/^(-?)(\d+)((\.\d+)?)$/,
        function ($0, $1, $2, $3) {
            return $1 + $2.replace(reg, `$&${delimiter}`) + $3;
        })
}

Js身份证验证函数

//            二代身份证号码为 18 位，其最后一位(第 18 位)的计算方法为:
//           1、 将前面的身份证号码 17 位数分别乘以不同的系数。从第一位到第十七位的系数分别 为:7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2
//            2、 将这 17 位数字和系数相乘的结果相加
//           3、 用加出来和除以 11，看余数是多少?
//            4、 余数只可能有 0-1-2-3-4-5-6-7-8-9-10 这 11 个数字。
//               每个数字所对应的 最后一位身份证的号码为:1-0-X-9-8-7-6-5-4-3-2
//               即，如果余数是是 2，就会在身份证的第 18 位数字上出现罗马数字的X。如果余数是 10，身份证的最后一位号码就 是 2
//        身份验证函数
function Authentication() {
  const arrXishu = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //声明系数数组
  var arrch = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; //声明最后一位身份证号码的数组
  var idcard = document.getElementById("IdCard").value;
  var arrIdcard = idcard.split(""); //字符串转化为数组
  var sum = 0;
  if (arrIdcard.length != 18) {
    return alert("输入的号码有误");
  } else {
    for (var index = 0; index < arrXishu.length; index++) {
      sum += parseInt(arrXishu[index]) * arrXishu[index];
    }
    let c = sum % 11;
    let code = arrch(c);
    if (code == arrIdcard.charAt(17)) {
      alert("身份证号码正确");
    } else {
      alert("身份证号码错误");
    }
  }
}

JS 执行计时器

timeStart = new Date().getTime();
timesEnd = new Date().getTime();
document.getElementById("time").innerHTML = timesEnd - timeStart;

JS写入Cookie

function setCookie(name, value, expires, path, domain) {
  if (!expires) expires = -1;
  if (!path) path = "/";
  var d = "" + name + "=" + value;
  var e;
  if (expires < 0) {
    e = "";
  } else if (expires == 0) {
    var f = new Date(1970, 1, 1);
    e = ";expires=" + f.toUTCString();
  } else {
    var now = new Date();
    var f = new Date(now.getTime() + expires * 1000);
    e = ";expires=" + f.toUTCString();
  }
  var dm;
  if (!domain) {
    dm = "";
  } else {
    dm = ";domain=" + domain;
  }
  document.cookie = name + "=" + value + ";path=" + path + e + dm;
};

JS 读Cookie

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) {
      return decodeURIComponent(c.substring(nameEQ.length, c.length))
    }
  }
  return null
}

原生Ajax 请求

function jsAjax(args) {
  var self = this;
  this.options = {
    type: 'GET',
    async: true,
    contentType: 'application/x-www-form-urlencoded',
    url: 'about:blank',
    data: null,
    success: {},
    error: {}
  };
  this.getXmlHttp = function () {
    var xmlHttp;
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
    if (!xmlhttp) {
      alert('您的浏览器不支持AJAX');
      return false;
    }
    return xmlhttp;
  };
  this.send = function () {
    C.each(self.options, function (key, val) {
      self.options[key] = (args[key] == null) ? val : args[key];
    });

    var xmlHttp = new self.getXmlHttp();
    if (self.options.type.toUpperCase() == 'GET') {
      xmlHttp.open(self.options.type, self.options.url + (self.options.data == null ? "" : ((/[?]$/.test(self.options.url) ? '&' : '?') + self.options.data)), self.options.async);
    } else {
      xmlHttp.open(self.options.type, self.options.url, self.options.async);
      xmlHttp.setRequestHeader('Content-Length', self.options.data.length);
    }
    xmlHttp.setRequestHeader('Content-Type', self.options.contentType);
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200 || xmlHttp.status == 0) {
          if (typeof self.options.success == 'function') self.options.success(xmlHttp.responseText);
          xmlHttp = null;
        } else {
          if (typeof self.options.error == 'function') self.options.error('Server Status: ' + xmlHttp.status);
        }
      }
    };
    xmlHttp.send(self.options.type.toUpperCase() == 'POST' ? self.options.data.toString() : null);
  };
  this.send();
};

JS 加载到顶部LoadJS

function loadJS(url, fn) {
  var ss = document.getElementsByName('script'),
    loaded = false;
  for (var i = 0, len = ss.length; i < len; i++) {
    if (ss[i].src && ss[i].getAttribute('src') == url) {
      loaded = true;
      break;
    }
  }
  if (loaded) {
    if (fn && typeof fn != 'undefined' && fn instanceof Function) fn();
    return false;
  }
  var s = document.createElement('script'),
    b = false;
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', url);
  s.onload = s.onreadystatechange = function () {
    if (!b && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
      b = true;
      if (fn && typeof fn != 'undefined' && fn instanceof Function) fn();
    }
  };
  document.getElementsByTagName('head')[0].appendChild(s);
};

function bind(objId, eventType, callBack) { //适用于任何浏览器的绑定
  var obj = document.getElementById(objId);
  if (obj.addEventListener) {
    obj.addEventListener(eventType, callBack, false);
  } else if (window.attachEvent) {
    obj.attachEvent('on' + eventType, callBack);
  } else {
    obj['on' + eventType] = callBack;
  }
}

function JSLoad(args) {
  s = document.createElement("script");
  s.setAttribute("type", "text/javascript");
  s.setAttribute("src", args.url);
  s.onload = s.onreadystatechange = function () {
    if (!s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
      if (typeof args.callback == "function") args.callback(this, args);
      s.onload = s.onreadystatechange = null;
      try {
        s.parentNode && s.parentNode.removeChild(s);
      } catch (e) {}
    }
  };
  document.getElementsByTagName("head")[0].appendChild(s);
}

清空 LoadJS 加载到顶部的js引用

function ClearHeadJs(src) {
  var js = document.getElementsByTagName('head')[0].children;
  var obj = null;
  for (var i = 0; i < js.length; i++) {
    if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) {
      obj = js[i];
    }
  }
  document.getElementsByTagName('head')[0].removeChild(obj);
};

js 动态移除 head 里的 js 引用

function ClearHeadJs(src) {
  var js = document.getElementsByTagName('head')[0].children;
  var obj = null;
  for (var i = 0; i < js.length; i++) {
    if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) {
      obj = js[i];
    }
  }
  document.getElementsByTagName('head')[0].removeChild(obj);
};

整个URL 点击事件加在UL里的onclick里

function CreateFrom(url, params) {
  var f = document.createElement("form");
  f.setAttribute("action", url);
  for (var i = 0; i < params.length; i++) {
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", params[i].paramName);
    input.setAttribute("value", params[i].paramValue);
    f.appendChild(input);
  }
  f.target = "_blank";
  document.body.appendChild(f);
  f.submit();
};

获取地址栏某个参数的字段

/**
 * 获取地址栏某个参数的字段
 *
 * @param {any} name
 * @returns
 */
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

js常用函数总结

常用工具函数

Array

js删除数组指定item

js删除指定index的item

递归遍历数组成员并输出

JS插入排序

BOM

判断浏览器

手机类型判断

获取当前js的版本

判断浏览器是否支持CSS3属性

阻止事件冒泡

加入收藏

实现设为首页

String

JS 替换非法字符主要用在密码验证上出现的特殊字符

Js 去掉空格方法

字符串截取方法

求一个字符串长度

js实现解析URL参数， 返回一个对象

Date

JS判断两个日期大小 适合 2012 - 09 - 09 与2012 - 9 - 9 两种格式的对比

获取当前时间

获取前num天的日期

DOM

增加/移除事件

js实时计算rem,宽度大于1920px时1rem=100px

绑定按钮回车触发单机事件

按Ctrl + Entert 直接提交表单

全选 / 全不选

原生JS获取鼠标XY轴的值

JS实现添加事件兼容函数

JS获取某元素以浏览器左上角为原点的坐标(有问题)

JS获取鼠标X.Y轴坐标

Object

js实现对象的深Clone

Math

JS 生成范围随机整数

XML

转成XML对象

常用例子

格式化数字串

Js身份证验证函数

JS 执行计时器

JS写入Cookie

JS 读Cookie

原生Ajax 请求

JS 加载到顶部LoadJS

清空 LoadJS 加载到顶部的js引用

js 动态移除 head 里的 js 引用

整个URL 点击事件 加在UL里的onclick里

获取地址栏某个参数的字段

猜你喜欢

热点阅读

js实现解析URL参数，返回一个对象

JS判断两个日期大小适合 2012 - 09 - 09 与2012 - 9 - 9 两种格式的对比

整个URL 点击事件加在UL里的onclick里