JavaScript经常使用函数大全

时间 2019-11-11

原文原文链接

##新打开窗口javascript

利用form标签css

如利用如下的HTMLhtml

<form method="get" target="_blank" action="http://www.baidu.com/" id="g-form">
  <input type="hidden" name="keywords3" value="123">
</form>

当要打开新的窗口，把以上的HTML插入到<body/>里，而后赋值好input[type=hidden]的参数，再触发form.submit()方法。（不能直接在action赋值为一个带参数的URL，而是利用input[type=hidden]）java

利用window.open方法jquery

这个能够查看window.open方法的API来css3

##检测是否支持transitiongit

var supportTransition = (function() {
    var s = document.createElement('p').style,
        r = 'transition' in s ||
        'WebkitTransition' in s ||
        'MozTransition' in s ||
        'msTransition' in s ||
        'OTransition' in s;
    s = null;
    return r;
})();

##检测是否已安装flash及版本github

// 检测是否已经安装flash，检测flash的版本
var flashVersion = (function() {
    var version;

    try {
        version = navigator.plugins['Shockwave Flash'];
        version = version.description;
    } catch (ex) {
        try {
            version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
                .GetVariable('$version');
        } catch (ex2) {
            version = '0.0';
        }
    }
    version = version.match(/\d+/g);
    return parseFloat(version[0] + '.' + version[1], 10);
})();

##判断浏览器是否支持图片的base64web

(function() {
    var data = new Image();
    var support = true;
    data.onload = data.onerror = function() {
        if (this.width != 1 || this.height != 1) {
            support = false;
        }
        window.isSupportBase64 = support;
    };
    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
})();

检查文档DOM元素是否在Document中

经过不停检查它的父节点有没有document元素便可chrome

#检查元素是否在文档中
checkIfInDocument = (dom)->
  if !dom
    return false
  curParent = dom.parentNode
  inDoc = null
  recur = ->
    if null == curParent
      inDoc = false
    else if "html" == curParent.tagName.toLowerCase()
      inDoc = true
    else
      curParent = curParent.parentNode
      recur()
  recur()
  return inDoc

手机号码正则判断

var rePhone = /^(13|14|15|17|18)\d{9}$/;

秒数转换为相差的时间

/* @param {number} s: 秒数 */
function arrive_timer_format(s) {
  var t, hour, min, sec, day;
  if (s > -1) {
    hour = Math.floor(s / 3600);
    min = Math.floor(s / 60) % 60;
    sec = s % 60;
    day = parseInt(hour / 24);
    if (day > 0) {
      hour = hour - 24 * day;
      t = day + "day " + hour + ":";
    } else t = hour + ":";
    if (min < 10) {
      t += "0";
    }
    t += min + ":";
    if (sec < 10) {
      t += "0";
    }
    t += sec;
  }

  return [day, hour, min, sec, t];
}

图片自动判断居中

// 智能适配图片在容器的位置、大小
// 注意事项，每一个img的父容器必定要有大小
// 不少时候没注意，加了个宽度和高度都为0的a标签，这时要把a设为display:block;
function autoAdjustImg(imgSelector) {
  var $imgs = $(imgSelector),

    adjust = function($img, $wrap) {
      var wrapW = $wrap.width(),
        wrapH = $wrap.height(),
        wrapRatio = wrapW / wrapH,
        imgW = $img.width(),
        imgH = $img.height(),
        imgRatio = imgW / imgH,

        adjustW = function() {
          $img.css({
            width: wrapW + 'px',
            height: 'auto',
            marginTop: (wrapH - wrapW / imgW * imgH) / 2 + 'px'
          });
        },

        adjustH = function() {
          $img.css({
            height: wrapH + 'px',
            width: 'auto',
            marginLeft: (wrapW - wrapH / imgH * imgW) / 2 + 'px'
          });
        },

        adjustRect = function() {
          $img.css({
            marginLeft: (wrapW - imgW) / 2 + 'px',
            marginTop: (wrapH - imgH) / 2 + 'px'
          });
        };

      if (imgW > wrapW && imgH > wrapH) {
        if (wrapRatio > imgRatio) {
          // 证实是图片的高度较大
          adjustH();
        } else {
          // 图片的宽度较大
          adjustW();
        }
      } else if (imgW > wrapW) {
        adjustW();
      } else if (imgH > wrapH) {
        adjustH();
      } else {
        adjustRect();
      }

      $img[0]._autoAdjusted = true;
    };

  $.each($imgs, function(i, img) {
    var $curImg = $(img),
      $curWrap = $curImg.parent();

    if (img.complete) {
      adjust($curImg, $curWrap);
    } else {
      img.onload = function() {
        adjust($curImg, $curWrap);
      };
    }
  });
}

使弹窗页面居中

这个方法已集成在本人开发的弹窗插件中：查看连接jquery.popup.js

免疫bodyclick方法

这个是个比较好的方法，一个弹出窗口，要设定在任何其余地方点击这个窗口会自动消失，但点这个窗口内部是没事的。那么就要用到这个方法了。->即用于检查是否点击了目标窗口而触发的bodyclic事件，若是是，你就能够另做处理了。

function clickBodyUnlessById(evt, id){
  // 是否为普通的Body点击事件，true->普通事件，false->点击到目标ID的Dom了
  return id === evt.target.id || $(evt.target).parents(['#', id].join('')).length?!1:!0;
}

#免疫bodyclick
clickBodyUnlessByDom = (evt, dom)->
  $dom = $(dom)
  specialId = "__kobe_special_id_zzzz__"
  if !$dom.prop("id")
    $dom.prop("id", specialId)
  id = $dom.prop("id")
  #是否为普通body点击事件, true->普通事件, false->点击到目标dom了
  if id == evt.target.id
    isNormal = false
  else if $(evt.target).parents("#"+id).length
    isNormal = false
  else
    isNormal = true

  if specialId == id
    $dom.attr("id", null)

  return isNormal

// 通常用法
$(document).on("click", function(evt){
  if(false === clickBodyUnlessById(evt, 'test')) return;  // 经过id
  // if(false === clickBodyUnlessByDom(evt, $("div#test"))) return; // （可选）经过Dom
  $("#test").remove();
});

将url参数转为obj

# 直接读取location来转换URL参数
urlParamToObj = ()->
  if location.search
    u = location.search
  else
    u = location.href
    u = u.slice(0, u.indexOf("#"))
  p = {}
  if -1 != u.indexOf("?")
    sear = u.slice(u.indexOf("?")+1).split("&")
    for item in sear
      do(item)->
        s = item.split("=")
        p[s[0]] = s[1]
  return p

##数组去重

//此方法充分利用了递归和indexOf方法，感谢网友@真爱像深蓝
var unique = function(arr, newArr) {
  var num;

  if (-1 == arr.indexOf(num = arr.shift())) newArr.push(num);

  arr.length && unique(arr, newArr);
}

##数据求交集

var intersection = function(array1, array2) {
  return array1.filter(function(n) {
    return array2.indexOf(n) != -1;
  });
}

克隆方法-clone()

貌似本方法未做严谨处理，好比处理Date,RegExp,function的状况。若是确认只是普通使用场景，克隆对象不存在上面的状况，那么可放心使用本方法

简版：

function clone(src){
  var dist;

  switch(typeof src){
    case "object":
      if(src instanceof Array){
        dist = [];
        for(var i=0,j=src.length; j>i; i++){
          dist.push(clone(src[i]));
        }
      }else if (null !== src){
        dist = {};
        for(var key in src){
          dist[key] = clone(src[key]);
        }
      }else{
        dist = src;
      }
      break;

    default:
      dist = src;
  }

  return dist;
}

原版：

function clone(obj) {
  var o;
  switch (typeof obj) {
    case 'undefined':
      break;
    case 'string':
      o = obj + '';
      break;
    case 'number':
      o = obj - 0;
      break;
    case 'boolean':
      o = obj;
      break;
    case 'object':
      if (obj === null) {
        o = null;
      } else {
        if (obj instanceof Array) {
          o = [];
          for (var i = 0, len = obj.length; i < len; i++) {
            o.push(clone(obj[i]));
          }
        } else {
          o = {};
          for (var k in obj) {
            o[k] = clone(obj[k]);
          }
        }
      }
      break;
    default:
      o = obj;
      break;
  }
  return o;
}

邮箱格式-正则检查

var reEmail = /^(?:\w+\.)*\w+@\w+(?:\.\w+)+$/i;
reEmail.test( "abc@abc.com" ),       // true
reEmail.test( "abc.@abc.com" ),      // false
reEmail.test( "abc.def@abc.com" ),   // true
reEmail.test( "abc@abc.def.cn" );    // true

生成GUID码

Math.guid = function(){
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c){

    var r = Math.random()*16|0, v = c == "x" ? r : (r&0x3|0x8);
    return v.toString(16);
  }).toUpperCase();
};

随机生成数字字母的字符串(验证码)

function generateRandomAlphaNum(len) {
  var rdmString = "";
  for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
  return rdmString.substr(0, len);
}
// 译者注：特地查了一下Math.random()生成0到1之间的随机数，number.toString(36)是将这个数字转换成36进制（0-9，a-z），最后substr去掉前面的“0.”字符串

base64字符串编码与解码

function base64Encode(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
function base64Decode(str) {
  return decodeURIComponent(escape(atob(str)));
}

js兼容获取最终样式

function getStyle(obj, attribute) {
  return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, null)[attribute];
}
//IE:
var bgColor = oDiv.currentStyle.backgroundColor; //只读的，若是对它进行写入会发生错误
//DOM:
//getComputedStyle(obj,null)接受两个参数，须要获取样式的元素和诸如:hover和:first-letter之类的伪元素
var bgColor = document.defaultView.getComputedStyle(oDiv, null).backgroundColor;

大数字每3位添加逗号

function addCommas(nStr) {
  nStr += '';
  var x = nStr.split('.');
  var x1 = x[0];
  var x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(d+)(d{3})/;

  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }

  return x1 + x2;
}

window.requestAnimationFrame兼容写法

window.requestAnimFrame = function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e, t) {
    return window.setTimeout(e, 1e3 / 60)
  };
}();

js的trim()

s = new String("   -- kobe  ").trim();//  -> "-- kobe"
s = new String("   -- kobe  ").trimLeft();// -> "-- kobe  "
s = new String("   -- kobe  ").trimRight();// -> "   -- kobe"

// 正则实现trim()
function trim(a) {return a.replace(/(^\s*)|(\s*$)/g, "")}

// jquery
$.trim(" haha ");

判断浏览器类型

//浏览器判断，使用方法：
var userAgent = navigator.userAgent.toLowerCase();
browser = {
  version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
  safari: /webkit/.test(userAgent),
  opera: /opera/.test(userAgent),
  chrome: /chrome/.test(userAgent),
  msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
  mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
}
//判断IE6
function isIe6() {
  if (browser.msie && browser.version == '6.0') {
    alert('他就是IE6');
  } else {
    alert('不是IE6');
  }
}
isIe6();

jQuery方法：

/* <![CDATA[ */
$(document).ready(function() {
  var bro = $.browser;
  var binfo = "";
  if (bro.msie) {
    binfo = "Microsoft Internet Explorer " + bro.version;
  }
  if (bro.mozilla) {
    binfo = "Mozilla Firefox " + bro.version;
  }
  if (bro.safari) {
    binfo = "Apple Safari " + bro.version;
  }
  if (bro.opera) {
    binfo = "Opera " + bro.version;
  }
  //alert(binfo);
  $("#browser").html(binfo);
})
/* ]]> */

获取浏览器的前缀

var prefix = (function() {
  if ("undefined" !== typeof window.getComputedStyle) {
    var styles = window.getComputedStyle(document.documentElement, ''),
      pre = (Array.prototype.slice
        .call(styles)
        .join('')
        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
      )[1],
      dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
      dom: dom,
      lowercase: pre,
      css: '-' + pre + '-',
      js: pre[0].toUpperCase() + pre.substr(1)
    };
  }
})();

输出有：

{"dom":"WebKit","lowercase":"webkit","css":"-webkit-","js":"Webkit"}
{"dom":"MS","lowercase":"ms","css":"-ms-","js":"Ms"}
{"dom":"Moz","lowercase":"moz","css":"-moz-","js":"Moz"}

throttle-debounce

/*
 * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次
 * @param fn {function}  须要调用的函数
 * @param delay {number}    延迟时间，单位毫秒
 * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
 * @return {function}   实际调用函数
 */
function throttle(fn, delay, immediate, debounce) {
  var curr = +new Date(), //当前时间
    last_call = 0,
    last_exec = 0,
    timer = null,
    diff, //时间差
    context, //上下文
    args,
    exec = function() {
      last_exec = curr;
      fn.apply(context, args);
    };
  return function() {
    curr = +new Date();
    context = this,
    args = arguments,
    diff = curr - (debounce ? last_call : last_exec) - delay;
    clearTimeout(timer);

    if (debounce) {
      if (immediate) {
        timer = setTimeout(exec, delay);
      } else if (diff >= 0) {
        exec();
      }
    } else {
      if (diff >= 0) {
        exec();
      } else if (immediate) {
        timer = setTimeout(exec, -diff);
      }
    }

    last_call = curr;
  }
}

/*
 * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行
 * @param fn {function}  要调用的函数
 * @param delay {number}    空闲时间
 * @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
 * @return {function}   实际调用函数
 */
function debounce(fn, delay, immediate) {
  return throttle(fn, delay, immediate, true);
}

/* 调用控制
 * 每次调用都会延迟执行fn，直至再也不调用后再延迟执行
 * @param fn {function}  要调用的函数
 * @param delay {number}    延迟时间
 */
function debounceLast(fn, delay){
  var timer, delay = delay || 100, _this, args;

  return function(){
    if(timer){
      clearTimeout(timer);
    }

    _this = this, args = arguments;

    timer = setTimeout(function(){
      fn.apply(_this, args);
      timer = null;
    }, delay);
  }
}

简单来讲，假设设置了delay为1秒，若是连续不停快速触发fn，throttle会每秒触发一次fn，由于频率控制在最多每秒触发1次；而debounce第一秒后触发fn，以后都不会触发fn，由于至少要1秒的空闲时间才能够继续触发fn；而debounceLast的方法一直被触发的话那一直都不会执行，直至中止触发后才延迟delay毫秒后执行

获取css的伪元素

:hover, :active, :before……

var bgcolor = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('background-color');

var aFontSize = window.getComputedStyle(document.getElementById("a"), ":hover").fontSize;

js类型判断

typeof:不能很好判断obj, null , arr, regexp和自定义对象
constructor: 支持大部分对象类型判断，特别是自定义类型对象，但不能在null和undefined上使用
Object.prototype.toString.call():支持绝大多数类型判断，但不支持自定义类型对象

var toString = Object.prototype.toString;
console.log(toString.call(arr)); // [object Array]
console.log(toString.call(nullObj)); //[object Null]
console.log(toString.call(user)); // [object Object]不能做进一步的判断

为何不直接用obj.toString()？由于obj.toString()返回的是其对象的内容，如数值，字符串，数组等内容，很差作判断

总结：推荐使用Object.prototype.toString.call()方法，由于他能解决绝大部分状况的判断，在遇到返回值为[object Object]时，再使用constructor辅助判断，看是不是自定义对象。

判断是否支持移动端触摸事件

'ontouchstart' in document.documentElement

Function.prototype.bind补丁

if (!Function.prototype.bind) {
  Function.prototype.bind = function(obj) {
    var slice = [].slice,
      args = slice.call(arguments, 1),
      self = this,
      nop = function() {},
      bound = function() {
        return self.apply(this instanceof nop ? this : (obj || {}),
          args.concat(slice.call(arguments)));
      };

    nop.prototype = self.prototype;

    bound.prototype = new nop();

    return bound;
  };
}

position-sticky的实现

在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

position:sticky是一个新的css3属性，它的表现相似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

HTML5浏览器实现：

.sticky {
  position: -webkit-sticky;
  position:sticky;
  top: 15px;
}
···

其余浏览器实现：

```html
<style>
.sticky { position: fixed; top: 0; }
.header { width: 100%; background: #F6D565; padding: 25px 0; }
</style>

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
 window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

##字符串长度截取

function cutstr(str, len) {
  var temp,
    icount = 0,
    patrn = /[^\x00-\xff]/，
  strre = "";
  for (var i = 0; i < str.length; i++) {
    if (icount < len - 1) {
      temp = str.substr(i, 1);
      if (patrn.exec(temp) == null) {
        icount = icount + 1
      } else {
        icount = icount + 2
      }
      strre += temp
    } else {
      break;
    }
  }
  return strre + "..."
}

##字符串替换所有

String.prototype.replaceAll = function(s1, s2) {
  return this.replace(new RegExp(s1, "gm"), s2)
}

##转义html标签

function HtmlEncode(text) {
  return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>')
}

##时间日期格式转换

Date.prototype.Format = function(formatStr) {
  var str = formatStr;
  var Week = ['日', '一', '二', '三', '四', '五', '六'];
  str = str.replace(/yyyy|YYYY/, this.getFullYear());
  str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
  str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
  str = str.replace(/M/g, (this.getMonth() + 1));
  str = str.replace(/w|W/g, Week[this.getDay()]);
  str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
  str = str.replace(/d|D/g, this.getDate());
  str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
  str = str.replace(/h|H/g, this.getHours());
  str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
  str = str.replace(/m/g, this.getMinutes());
  str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
  str = str.replace(/s|S/g, this.getSeconds());
  return str
}

##加入收藏夹

function AddFavorite(sURL, sTitle) {
  try {
    window.external.addFavorite(sURL, sTitle)
  } catch (e) {
    try {
      window.sidebar.addPanel(sTitle, sURL, "")
    } catch (e) {
      alert("加入收藏失败，请使用Ctrl+D进行添加")
    }
  }
}

##设为首页

function setHomepage() {
  if (document.all) {
    document.body.style.behavior = 'url(#default#homepage)';
    document.body.setHomePage('http://w3cboy.com')
  } else if (window.sidebar) {
    if (window.netscape) {
      try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
      } catch (e) {
        alert("该操做被浏览器拒绝，若是想启用该功能，请在地址栏内输入 about:config,而后将项 signed.applets.codebase_principal_support 值该为true")
      }
    }
    var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
    prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com')
  }
}

##关闭网页时警告

window.onbeforeunload = function(){
  return "真的要离开？";
};

##解绑匿名函数事件

利用arguments.callee

document.body.addEventListener("click", function(){
  alert("clicked!");
  document.body.removeEventListener("click", arguments.callee, false);
}, false);