JavaScript工具函数大全

果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力

为元素添加on方法

Element.prototype.on=Element.prototype.addEventListener;

NodeList.prototype.on=function (event, fn) {、
    []['forEach'].call(this, function (el) {
        el.on(event, fn);
    });
    return this;
};

为元素添加trigger方法

Element.prototype.trigger=function(type, data) {
  var event=document.createEvent("HTMLEvents");
  event.initEvent(type, true, true);
  event.data=data || {};
  event.eventName=type;
  event.target=this;
  this.dispatchEvent(event);
  return this;
};

NodeList.prototype.trigger=function(event) {
  []["forEach"].call(this, function(el) {
    el["trigger"](event);
  });
  return this;
};

转义html标签

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

HTML标签转义

// HTML 标签转义
// @param {Array.<DOMString>} templateData 字符串类型的tokens
// @param {...} ..vals 表达式占位符的运算结果tokens
//
function SaferHTML(templateData) {
  var s=templateData[0];
  for (var i=1; i < arguments.length; i++) {
    var arg=String(arguments[i]);
    // Escape special characters in the substitution.
    s +=arg
      .replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">");
    // Don't escape special characters in the template.
    s +=templateData[i];
  }
  return s;
}
// 调用
var html=SaferHTML`<p>这是关于字符串模板的介绍</p>`;

跨浏览器绑定事件


function addEventSamp(obj, evt, fn) {
  if (!oTarget) {
    return;
  }
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + evt, fn);
  } else {
    oTarget["on" + sEvtType]=fn;
  }
}

加入收藏夹


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

提取页面代码中所有网址

var aa=document.documentElement.outerHTML
  .match(
    /(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/gi
  )
  .join("\r\n")
  .replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/gim, "");
alert(aa);

动态加载脚本文件

function appendscript(src, text, reload, charset) {
  var id=hash(src + text);
  if (!reload && in_array(id, evalscripts)) return;
  if (reload && $(id)) {
    $(id).parentNode.removeChild($(id));
  }

  evalscripts.push(id);
  var scriptNode=document.createElement("script");
  scriptNode.type="text/javascript";
  scriptNode.id=id;
  scriptNode.charset=charset
    ? charset
    : BROWSER.firefox
    ? document.characterSet
    : document.charset;
  try {
    if (src) {
      scriptNode.src=src;
      scriptNode.onloadDone=false;
      scriptNode.onload=function() {
        scriptNode.onloadDone=true;
        JSLOADED[src]=1;
      };
      scriptNode.onreadystatechange=function() {
        if (
          (scriptNode.readyState=="loaded" ||
            scriptNode.readyState=="complete") &&
          !scriptNode.onloadDone
        ) {
          scriptNode.onloadDone=true;
          JSLOADED[src]=1;
        }
      };
    } else if (text) {
      scriptNode.text=text;
    }
    document.getElementsByTagName("head")[0].appendChild(scriptNode);
  } catch (e) {}
}

返回顶部的通用方法

function backTop(btnId) {
  var btn=document.getElementById(btnId);
  var d=document.documentElement;
  var b=document.body;
  window.onscroll=set;
  btn.style.display="none";
  btn.onclick=function() {
    btn.style.display="none";
    window.onscroll=null;
    this.timer=setInterval(function() {
      d.scrollTop -=Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
      b.scrollTop -=Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
      if (d.scrollTop + b.scrollTop==0)
        clearInterval(btn.timer, (window.onscroll=set));
    }, 10);
  };
  function set() {
    btn.style.display=d.scrollTop + b.scrollTop > 100 ? "block" : "none";
  }
}
backTop("goTop");

实现base64解码


function base64_decode(data) {
  var b64="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var o1,
    o2,
    o3,
    h1,
    h2,
    h3,
    h4,
    bits,
    i=0,
    ac=0,
    dec="",
    tmp_arr=[];
  if (!data) {
    return data;
  }
  data +="";
  do {
    h1=b64.indexOf(data.charAt(i++));
    h2=b64.indexOf(data.charAt(i++));
    h3=b64.indexOf(data.charAt(i++));
    h4=b64.indexOf(data.charAt(i++));
    bits=(h1 << 18) | (h2 << 12) | (h3 << 6) | h4;
    o1=(bits >> 16) & 0xff;
    o2=(bits >> 8) & 0xff;
    o3=bits & 0xff;
    if (h3==64) {
      tmp_arr[ac++]=String.fromCharCode(o1);
    } else if (h4==64) {
      tmp_arr[ac++]=String.fromCharCode(o1, o2);
    } else {
      tmp_arr[ac++]=String.fromCharCode(o1, o2, o3);
    }
  } while (i < data.length);
  dec=tmp_arr.join("");
  dec=utf8_decode(dec);
  return dec;
}

确认是否是键盘有效输入值

function checkKey(iKey) {
  if (iKey==32 || iKey==229) {
    return true;
  } /*空格和异常*/
  if (iKey > 47 && iKey < 58) {
    return true;
  } /*数字*/
  if (iKey > 64 && iKey < 91) {
    return true;
  } /*字母*/
  if (iKey > 95 && iKey < 108) {
    return true;
  } /*数字键盘1*/
  if (iKey > 108 && iKey < 112) {
    return true;
  } /*数字键盘2*/
  if (iKey > 185 && iKey < 193) {
    return true;
  } /*符号1*/
  if (iKey > 218 && iKey < 223) {
    return true;
  } /*符号2*/
  return false;
}

全角半角转换

//iCase: 0全到半，1半到全，其他不转化
function chgCase(sStr, iCase) {
  if (
    typeof sStr !="string" ||
    sStr.length <=0 ||
    !(iCase===0 || iCase==1)
  ) {
    return sStr;
  }
  var i,
    oRs=[],
    iCode;
  if (iCase) {
    /*半->全*/
    for (i=0; i < sStr.length; i +=1) {
      iCode=sStr.charCodeAt(i);
      if (iCode==32) {
        iCode=12288;
      } else if (iCode < 127) {
        iCode +=65248;
      }
      oRs.push(String.fromCharCode(iCode));
    }
  } else {
    /*全->半*/
    for (i=0; i < sStr.length; i +=1) {
      iCode=sStr.charCodeAt(i);
      if (iCode==12288) {
        iCode=32;
      } else if (iCode > 65280 && iCode < 65375) {
        iCode -=65248;
      }
      oRs.push(String.fromCharCode(iCode));
    }
  }
  return oRs.join("");
}

版本对比

function compareVersion(v1, v2) {
  v1=v1.split(".");
  v2=v2.split(".");

  var len=Math.max(v1.length, v2.length);

  while (v1.length < len) {
    v1.push("0");
  }

  while (v2.length < len) {
    v2.push("0");
  }

  for (var i=0; i < len; i++) {
    var num1=parseInt(v1[i]);
    var num2=parseInt(v2[i]);

    if (num1 > num2) {
      return 1;
    } else if (num1 < num2) {
      return -1;
    }
  }
  return 0;
}

压缩CSS样式代码

function compressCss(s) {
  //压缩代码
  s=s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
  s=s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
  s=s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
  s=s.replace(/;\s*;/g, ";"); //清除连续分号
  s=s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
  return s==null ? "" : s[1];
}

获取当前路径

var currentPageUrl="";
if (typeof this.href==="undefined") {
  currentPageUrl=document.location.toString().toLowerCase();
} else {
  currentPageUrl=this.href.toString().toLowerCase();
}

字符串长度截取

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 + "..."
}

时间日期格式转换

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;
};

// 或
Date.prototype.format=function(format) {
  var o={
    "M+": this.getMonth() + 1, //month
    "d+": this.getDate(), //day
    "h+": this.getHours(), //hour
    "m+": this.getMinutes(), //minute
    "s+": this.getSeconds(), //second
    "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
    S: this.getMilliseconds() //millisecond
  };
  if (/(y+)/.test(format))
    format=format.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(format))
      format=format.replace(
        RegExp.$1,
        RegExp.$1.length==1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  }
  return format;
};
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

跨浏览器删除事件

function delEvt(obj, evt, fn) {
  if (!obj) {
    return;
  }
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (oTarget.attachEvent) {
    obj.attachEvent("on" + evt, fn);
  } else {
    obj["on" + evt]=fn;
  }
}

判断是否以某个字符串结束

String.prototype.endWith=function(s) {
  var d=this.length - s.length;
  return d >=0 && this.lastIndexOf(s)==d;
};

返回脚本内容

function evalscript(s) {
  if (s.indexOf("<script")==-1) return s;
  var p=/<script[^\>]*?>([^\x00]*?)<\/script>/gi;
  var arr=[];
  while ((arr=p.exec(s))) {
    var p1=/<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
    var arr1=[];
    arr1=p1.exec(arr[0]);
    if (arr1) {
      appendscript(arr1[1], "", arr1[2], arr1[3]);
    } else {
      p1=/<script(.*?)>([^\x00]+?)<\/script>/i;
      arr1=p1.exec(arr[0]);
      appendscript("", arr1[2], arr1[1].indexOf("reload=") !=-1);
    }
  }
  return s;
}

格式化CSS样式代码

function formatCss(s) {
  //格式化代码
  s=s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
  s=s.replace(/;\s*;/g, ";"); //清除连续分号
  s=s.replace(/\,[\s\.\#\d]*{/g, "{");
  s=s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
  s=s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
  s=s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
  return s;
}

获取cookie值

function getCookie(name) {
  var arr=document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr !=null) return unescape(arr[2]);
  return null;
}

获得URL中GET参数值

// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function getGet() {
  querystr=window.location.href.split("?");
  if (querystr[1]) {
    GETs=querystr[1].split("&");
    GET=[];
    for (i=0; i < GETs.length; i++) {
      tmp_arr=GETs.split("=");
      key=tmp_arr[0];
      GET[key]=tmp_arr[1];
    }
  }
  return querystr[1];
}

获取移动设备初始化大小

function getInitZoom() {
  if (!this._initZoom) {
    var screenWidth=Math.min(screen.height, screen.width);
    if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
      screenWidth=screenWidth / window.devicePixelRatio;
    }
    this._initZoom=screenWidth / document.body.offsetWidth;
  }
  return this._initZoom;
}

获取页面高度

function getPageHeight() {
  var g=document,
    a=g.body,
    f=g.documentElement,
    d=g.compatMode=="BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}

获取页面scrollLeft

function getPageScrollLeft() {
  var a=document;
  return a.documentElement.scrollLeft || a.body.scrollLeft;
}

获取页面scrollTop

function getPageScrollTop() {
  var a=document;
  return a.documentElement.scrollTop || a.body.scrollTop;
}

获取页面可视高度

function getPageViewHeight() {
  var d=document,
    a=d.compatMode=="BackCompat" ? d.body : d.documentElement;
  return a.clientHeight;
}

获取页面可视宽度

function getPageViewWidth() {
  var d=document,
    a=d.compatMode=="BackCompat" ? d.body : d.documentElement;
  return a.clientWidth;
}

获取页面宽度

function getPageWidth() {
  var g=document,
    a=g.body,
    f=g.documentElement,
    d=g.compatMode=="BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}

获取移动设备屏幕宽度

function getScreenWidth() {
  var smallerSide=Math.min(screen.width, screen.height);
  var fixViewPortsExperiment=rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var fixViewPortsExperimentRunning=fixViewPortsExperiment && fixViewPortsExperiment.toLowerCase()==="new";
  if (fixViewPortsExperiment) {
    if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
      smallerSide=smallerSide / window.devicePixelRatio;
    }
  }
  return smallerSide;
}

获取网页被卷去的位置

function getScrollXY() {
  return document.body.scrollTop
    ? {
        x: document.body.scrollLeft,
        y: document.body.scrollTop
      }
    : {
        x: document.documentElement.scrollLeft,
        y: document.documentElement.scrollTop
      };
}

获取URL上的参数

// 获取URL中的某参数值,不区分大小写
// 获取URL中的某参数值,不区分大小写,
// 默认是取'hash'里的参数，
// 如果传其他参数支持取‘search’中的参数
// @param {String} name 参数名称
export function getUrlParam(name, type="hash") {
  let newName=name,
    reg=new RegExp("(^|&)" + newName + "=([^&]*)(&|$)", "i"),
    paramHash=window.location.hash.split("?")[1] || "",
    paramSearch=window.location.search.split("?")[1] || "",
    param;

  type==="hash" ? (param=paramHash) : (param=paramSearch);

  let result=param.match(reg);

  if (result !=null) {
    return result[2].split("/")[0];
  }
  return null;
}

检验URL链接是否有效

function getUrlState(URL) {
  var xmlhttp=new ActiveXObject("microsoft.xmlhttp");
  xmlhttp.Open("GET", URL, false);
  try {
    xmlhttp.Send();
  } catch (e) {
  } finally {
    var result=xmlhttp.responseText;
    if (result) {
      if (xmlhttp.Status==200) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
}

获取窗体可见范围的宽与高

function getViewSize() {
  var de=document.documentElement;
  var db=document.body;
  var viewW=de.clientWidth==0 ? db.clientWidth : de.clientWidth;
  var viewH=de.clientHeight==0 ? db.clientHeight : de.clientHeight;
  return Array(viewW, viewH);
}

获取移动设备最大化大小

function getZoom() {
  var screenWidth=Math.abs(window.orientation)===90
      ? Math.max(screen.height, screen.width)
      : Math.min(screen.height, screen.width);
  if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
    screenWidth=screenWidth / window.devicePixelRatio;
  }
  var FixViewPortsExperiment=rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var FixViewPortsExperimentRunning=FixViewPortsExperiment &&
    (FixViewPortsExperiment==="New" || FixViewPortsExperiment==="new");
  if (FixViewPortsExperimentRunning) {
    return screenWidth / window.innerWidth;
  } else {
    return screenWidth / document.body.offsetWidth;
  }
}

判断是否安卓移动设备访问

function isAndroidMobileDevice() {
  return /android/i.test(navigator.userAgent.toLowerCase());
}

判断是否苹果移动设备访问

function isAppleMobileDevice() {
  return /iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase());
}

判断是否为数字类型

function isDigit(value) {
  var patrn=/^[0-9]*$/;
  if (patrn.exec(value)==null || value=="") {
    return false;
  } else {
    return true;
  }
}

是否是某类手机型号

// 用devicePixelRatio和分辨率判断
const isIphonex=()=> {
  // X XS, XS Max, XR
  const xSeriesConfig=[
    {
      devicePixelRatio: 3,
      width: 375,
      height: 812
    },
    {
      devicePixelRatio: 3,
      width: 414,
      height: 896
    },
    {
      devicePixelRatio: 2,
      width: 414,
      height: 896
    }
  ];
  // h5
  if (typeof window !=="undefined" && window) {
    const isIOS=/iphone/gi.test(window.navigator.userAgent);
    if (!isIOS) return false;
    const { devicePixelRatio, screen }=window;
    const { width, height }=screen;
    return xSeriesConfig.some(
      item=>
        item.devicePixelRatio===devicePixelRatio &&
        item.width===width &&
        item.height===height
    );
  }
  return false;
};

判断是否移动设备

function isMobile() {
  if (typeof this._isMobile==="boolean") {
    return this._isMobile;
  }
  var screenWidth=this.getScreenWidth();
  var fixViewPortsExperiment=rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var fixViewPortsExperimentRunning=fixViewPortsExperiment && fixViewPortsExperiment.toLowerCase()==="new";
  if (!fixViewPortsExperiment) {
    if (!this.isAppleMobileDevice()) {
      screenWidth=screenWidth / window.devicePixelRatio;
    }
  }
  var isMobileScreenSize=screenWidth < 600;
  var isMobileUserAgent=false;
  this._isMobile=isMobileScreenSize && this.isTouchScreen();
  return this._isMobile;
}

判断吗是否手机号码

function isMobileNumber(e) {
  var i="134,135,136,137,138,139,150,151,152,157,158,159,187,188,147,182,183,184,178",
    n="130,131,132,155,156,185,186,145,176",
    a="133,153,180,181,189,177,173,170",
    o=e || "",
    r=o.substring(0, 3),
    d=o.substring(0, 4),
    s=!!/^1\d{10}$/.test(o) &&
      (n.indexOf(r) >=0
        ? "联通"
        : a.indexOf(r) >=0
        ? "电信"
        : "1349"==d
        ? "电信"
        : i.indexOf(r) >=0
        ? "移动"
        : "未知");
  return s;
}

判断是否是移动设备访问

function isMobileUserAgent() {
  return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
    window.navigator.userAgent.toLowerCase()
  );
}

判断鼠标是否移出事件

function isMouseOut(e, handler) {
  if (e.type !=="mouseout") {
    return false;
  }
  var reltg=e.relatedTarget
    ? e.relatedTarget
    : e.type==="mouseout"
    ? e.toElement
    : e.fromElement;
  while (reltg && reltg !==handler) {
    reltg=reltg.parentNode;
  }
  return reltg !==handler;
}

判断是否Touch屏幕

function isTouchScreen() {
  return (
    "ontouchstart" in window ||
    (window.DocumentTouch && document instanceof DocumentTouch)
  );
}

判断是否为网址


function isURL(strUrl) {
  var regular=/^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i;
  if (regular.test(strUrl)) {
    return true;
  } else {
    return false;
  }
}

判断是否打开视窗

function isViewportOpen() {
  return !!document.getElementById("wixMobileViewport");
}

加载样式文件

function loadStyle(url) {
  try {
    document.createStyleSheet(url);
  } catch (e) {
    var cssLink=document.createElement("link");
    cssLink.rel="stylesheet";
    cssLink.type="text/css";
    cssLink.href=url;
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(cssLink);
  }
}

替换地址栏

function locationReplace(url) {
  if (history.replaceState) {
    history.replaceState(null, document.title, url);
    history.go(0);
  } else {
    location.replace(url);
  }
}

解决offsetX兼容性问题

// 针对火狐不支持offsetX/Y
function getOffset(e) {
  var target=e.target, // 当前触发的目标对象
    eventCoord,
    pageCoord,
    offsetCoord;

  // 计算当前触发元素到文档的距离
  pageCoord=getPageCoord(target);

  // 计算光标到文档的距离
  eventCoord={
    X: window.pageXOffset + e.clientX,
    Y: window.pageYOffset + e.clientY
  };

  // 相减获取光标到第一个定位的父元素的坐标
  offsetCoord={
    X: eventCoord.X - pageCoord.X,
    Y: eventCoord.Y - pageCoord.Y
  };
  return offsetCoord;
}

function getPageCoord(element) {
  var coord={ X: 0, Y: 0 };
  // 计算从当前触发元素到根节点为止，
  // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和
  while (element) {
    coord.X +=element.offsetLeft;
    coord.Y +=element.offsetTop;
    element=element.offsetParent;
  }
  return coord;
}

打开一个窗体通用方法

function openWindow(url, windowName, width, height) {
  var x=parseInt(screen.width / 2.0) - width / 2.0;
  var y=parseInt(screen.height / 2.0) - height / 2.0;
  var isMSIE=navigator.appName=="Microsoft Internet Explorer";
  if (isMSIE) {
    var p="resizable=1,location=no,scrollbars=no,width=";
    p=p + width;
    p=p + ",height=";
    p=p + height;
    p=p + ",left=";
    p=p + x;
    p=p + ",top=";
    p=p + y;
    retval=window.open(url, windowName, p);
  } else {
    var win=window.open(
      url,
      "ZyiisPopup",
      "top=" +
        y +
        ",left=" +
        x +
        ",scrollbars=" +
        scrollbars +
        ",dialog=yes,modal=yes,width=" +
        width +
        ",height=" +
        height +
        ",resizable=no"
    );
    eval("try { win.resizeTo(width, height); } catch(e) { }");
    win.focus();
  }
}

将键值对拼接成URL带参数

export default const fnParams2Url=obj=> {
      let aUrl=[]
      let fnAdd=function(key, value) {
        return key + '=' + value
      }
      for (var k in obj) {
        aUrl.push(fnAdd(k, obj[k]))
      }
      return encodeURIComponent(aUrl.join('&'))
 }

去掉url前缀

function removeUrlPrefix(a) {
  a=a
    .replace(/：/g, ":")
    .replace(/．/g, ".")
    .replace(/／/g, "/");
  while (
    trim(a)
      .toLowerCase()
      .indexOf("http://")==0
  ) {
    a=trim(a.replace(/http:\/\//i, ""));
  }
  return a;
}

替换全部

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

resize的操作

(function() {
  var fn=function() {
    var w=document.documentElement
        ? document.documentElement.clientWidth
        : document.body.clientWidth,
      r=1255,
      b=Element.extend(document.body),
      classname=b.className;
    if (w < r) {
      //当窗体的宽度小于1255的时候执行相应的操作
    } else {
      //当窗体的宽度大于1255的时候执行相应的操作
    }
  };
  if (window.addEventListener) {
    window.addEventListener("resize", function() {
      fn();
    });
  } else if (window.attachEvent) {
    window.attachEvent("onresize", function() {
      fn();
    });
  }
  fn();
})();

滚动到顶部

// 使用document.documentElement.scrollTop 或 document.body.scrollTop 获取到顶部的距离，从顶部
// 滚动一小部分距离。使用window.requestAnimationFrame()来滚动。
// @example
// scrollToTop();
function scrollToTop() {
  var c=document.documentElement.scrollTop || document.body.scrollTop;

  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

设置cookie值

function setCookie(name, value, Hours) {
  var d=new Date();
  var offset=8;
  var utc=d.getTime() + d.getTimezoneOffset() * 60000;
  var nd=utc + 3600000 * offset;
  var exp=new Date(nd);
  exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
  document.cookie=name +
    "=" +
    escape(value) +
    ";path=/;expires=" +
    exp.toGMTString() +
    ";domain=360doc.com;";
}

设为首页

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");
  }
}

按字母排序，对每行进行数组排序

function setSort() {
  var text=K1.value
    .split(/[\r\n]/)
    .sort()
    .join("\r\n"); //顺序
  var test=K1.value
    .split(/[\r\n]/)
    .sort()
    .reverse()
    .join("\r\n"); //反序
  K1.value=K1.value !=text ? text : test;
}

延时执行

// 比如 sleep(1000) 意味着等待1000毫秒，还可从 Promise、Generator、Async/Await 等角度实现。
// Promise
const sleep=time=> {
  return new Promise(resolve=> setTimeout(resolve, time));
};

sleep(1000).then(()=> {
  console.log(1);
});


// Generator
function* sleepGenerator(time) {
  yield new Promise(function(resolve, reject) {
    setTimeout(resolve, time);
  });
}

sleepGenerator(1000)
  .next()
  .value.then(()=> {
    console.log(1);
  });

//async
function sleep(time) {
  return new Promise(resolve=> setTimeout(resolve, time));
}

async function output() {
  let out=await sleep(1000);
  console.log(1);
  return out;
}

output();

function sleep(callback, time) {
  if (typeof callback==="function") {
    setTimeout(callback, time);
  }
}

function output() {
  console.log(1);
}

sleep(output, 1000);

判断是否以某个字符串开头

String.prototype.startWith=function(s) {
  return this.indexOf(s)==0;
};

清除脚本内容

function stripscript(s) {
  return s.replace(/<script.*?>.*?<\/script>/gi, "");
}

时间个性化输出功能

/*
1、< 60s, 显示为“刚刚”
2、>=1min && < 60 min, 显示与当前时间差“XX分钟前”
3、>=60min && < 1day, 显示与当前时间差“今天 XX:XX”
4、>=1day && < 1year, 显示日期“XX月XX日 XX:XX”
5、>=1year, 显示具体日期“XXXX年XX月XX日 XX:XX”
*/
function timeFormat(time) {
  var date=new Date(time),
    curDate=new Date(),
    year=date.getFullYear(),
    month=date.getMonth() + 10,
    day=date.getDate(),
    hour=date.getHours(),
    minute=date.getMinutes(),
    curYear=curDate.getFullYear(),
    curHour=curDate.getHours(),
    timeStr;

  if (year < curYear) {
    timeStr=year + "年" + month + "月" + day + "日 " + hour + ":" + minute;
  } else {
    var pastTime=curDate - date,
      pastH=pastTime / 3600000;

    if (pastH > curHour) {
      timeStr=month + "月" + day + "日 " + hour + ":" + minute;
    } else if (pastH >=1) {
      timeStr="今天 " + hour + ":" + minute + "分";
    } else {
      var pastM=curDate.getMinutes() - minute;
      if (pastM > 1) {
        timeStr=pastM + "分钟前";
      } else {
        timeStr="刚刚";
      }
    }
  }
  return timeStr;
}

全角转换为半角函数

function toCDB(str) {
  var result="";
  for (var i=0; i < str.length; i++) {
    code=str.charCodeAt(i);
    if (code >=65281 && code <=65374) {
      result +=String.fromCharCode(str.charCodeAt(i) - 65248);
    } else if (code==12288) {
      result +=String.fromCharCode(str.charCodeAt(i) - 12288 + 32);
    } else {
      result +=str.charAt(i);
    }
  }
  return result;
}

半角转换为全角函数

function toDBC(str) {
  var result="";
  for (var i=0; i < str.length; i++) {
    code=str.charCodeAt(i);
    if (code >=33 && code <=126) {
      result +=String.fromCharCode(str.charCodeAt(i) + 65248);
    } else if (code==32) {
      result +=String.fromCharCode(str.charCodeAt(i) + 12288 - 32);
    } else {
      result +=str.charAt(i);
    }
  }
  return result;
}

金额大写转换函数

function transform(tranvalue) {
  try {
    var i=1;
    var dw2=new Array("", "万", "亿"); //大单位
    var dw1=new Array("拾", "佰", "仟"); //小单位
    var dw=new Array(
      "零",
      "壹",
      "贰",
      "叁",
      "肆",
      "伍",
      "陆",
      "柒",
      "捌",
      "玖"
    ); 
    //整数部分用
    //以下是小写转换成大写显示在合计大写的文本框中
    //分离整数与小数
    var source=splits(tranvalue);
    var num=source[0];
    var dig=source[1];
    //转换整数部分
    var k1=0; //计小单位
    var k2=0; //计大单位
    var sum=0;
    var str="";
    var len=source[0].length; //整数的长度
    for (i=1; i <=len; i++) {
      var n=source[0].charAt(len - i); //取得某个位数上的数字
      var bn=0;
      if (len - i - 1 >=0) {
        bn=source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
      }
      sum=sum + Number(n);
      if (sum !=0) {
        str=dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面
        if (n=="0") sum=0;
      }
      if (len - i - 1 >=0) {
        //在数字范围内
        if (k1 !=3) {
          //加小单位
          if (bn !=0) {
            str=dw1[k1].concat(str);
          }
          k1++;
        } else {
          //不加小单位，加大单位
          k1=0;
          var temp=str.charAt(0);
          if (temp=="万" || temp=="亿")
            //若大单位前没有数字则舍去大单位
            str=str.substr(1, str.length - 1);
          str=dw2[k2].concat(str);
          sum=0;
        }
      }
      if (k1==3) {
        //小单位到千则大单位进一
        k2++;
      }
    }
    //转换小数部分
    var strdig="";
    if (dig !="") {
      var n=dig.charAt(0);
      if (n !=0) {
        strdig +=dw[Number(n)] + "角"; //加数字
      }
      var n=dig.charAt(1);
      if (n !=0) {
        strdig +=dw[Number(n)] + "分"; //加数字
      }
    }
    str +="元" + strdig;
  } catch (e) {
    return "0元";
  }
  return str;
}
//拆分整数与小数
function splits(tranvalue) {
  var value=new Array("", "");
  temp=tranvalue.split(".");
  for (var i=0; i < temp.length; i++) {
    value=temp;
  }
  return value;
}

清除空格

String.prototype.trim=function() {
  var reExtraSpace=/^\s*(.*?)\s+$/;
  return this.replace(reExtraSpace, "$1");
};

// 清除左空格
function ltrim(s) {
  return s.replace(/^(\s*|　*)/, "");
}

// 清除右空格
function rtrim(s) {
  return s.replace(/(\s*|　*)$/, "");
}

随机数时间戳

function uniqueId() {
  var a=Math.random,
    b=parseInt;
  return (
    Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a())
  );
}

实现utf8解码

function utf8_decode(str_data) {
  var tmp_arr=[],
    i=0,
    ac=0,
    c1=0,
    c2=0,
    c3=0;
  str_data +="";
  while (i < str_data.length) {
    c1=str_data.charCodeAt(i);
    if (c1 < 128) {
      tmp_arr[ac++]=String.fromCharCode(c1);
      i++;
    } else if (c1 > 191 && c1 < 224) {
      c2=str_data.charCodeAt(i + 1);
      tmp_arr[ac++]=String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
      i +=2;
    } else {
      c2=str_data.charCodeAt(i + 1);
      c3=str_data.charCodeAt(i + 2);
      tmp_arr[ac++]=String.fromCharCode(
        ((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
      );
      i +=3;
    }
  }
  return tmp_arr.join("");
}

以下是Puxiao投稿推荐的几个函数，用作常见的输入值校验和替换操作，主要针对中国大陆地区的校验规则：

校验是否为一个数字，以及该数字小数点位数是否与参数floats一致

校验规则：

若参数floats有值，则校验该数字小数点后的位数。
若参数floats没有值，则仅仅校验是否为数字。

function isNum(value,floats=null){
    let regexp=new RegExp(`^[1-9][0-9]*.[0-9]{${floats}}$|^0.[0-9]{${floats}}$`);
    return typeof value==='number' && floats?regexp.test(String(value)):true;
}

function anysicIntLength(minLength,maxLength){
    let result_str='';
    if(minLength){
        switch(maxLength){
            case undefined:
                result_str=result_str.concat(`{${minLength-1}}`);
                break;
            case null:
                result_str=result_str.concat(`{${minLength-1},}`);
                break;
            default:
                result_str=result_str.concat(`{${minLength-1},${maxLength-1}}`);
        }
    }else{
        result_str=result_str.concat('*');
    }

    return result_str;
}

校验是否为非零的正整数

function isInt(value,minLength=null,maxLength=undefined){
    if(!isNum(value)) return false;

    let regexp=new RegExp(`^-?[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

校验是否为非零的正整数

function isPInt(value,minLength=null,maxLength=undefined) {
    if(!isNum(value)) return false;

    let regexp=new RegExp(`^[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

校验是否为非零的负整数

function isNInt(value,minLength=null,maxLength=undefined){
    if(!isNum(value)) return false;
    let regexp=new RegExp(`^-[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

校验整数是否在取值范围内

校验规则：

minInt为在取值范围中最小的整数
maxInt为在取值范围中最大的整数

function checkIntRange(value,minInt,maxInt=9007199254740991){
    return Boolean(isInt(value) && (Boolean(minInt!=undefined && minInt!=null)?value>=minInt:true) && (value<=maxInt));
}

校验是否为中国大陆手机号

function isTel(value) {
    return /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value.toString());
}

校验是否为中国大陆传真或固定电话号码

function isFax(str) {
    return /^([0-9]{3,4})?[0-9]{7,8}$|^([0-9]{3,4}-)?[0-9]{7,8}$/.test(str);
}

校验是否为邮箱地址

function isEmail(str) {
    return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(str);
}

校验是否为QQ号码

校验规则：

非0开头的5位-13位整数

function isQQ(value) {
    return /^[1-9][0-9]{4,12}$/.test(value.toString());
}

校验是否为网址

校验规则：

以https://、http://、ftp://、rtsp://、mms://开头、或者没有这些开头
可以没有www开头(或其他二级域名)，仅域名
网页地址中允许出现/%*?@&等其他允许的符号

function isURL(str) {
    return /^(https:\/\/|http:\/\/|ftp:\/\/|rtsp:\/\/|mms:\/\/)?[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(str);
}

校验是否为不含端口号的IP地址

校验规则：

IP格式为xxx.xxx.xxx.xxx，每一项数字取值范围为0-255
除0以外其他数字不能以0开头，比如02

function isIP(str) {
    return /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])$/.test(str);
}

校验是否为IPv6地址

校验规则：

支持IPv6正常格式
支持IPv6压缩格式

function isIPv6(str){
    return Boolean(str.match(/:/g)?str.match(/:/g).length<=7:false && /::/.test(str)?/^([\da-f]{1,4}(:|::)){1,6}[\da-f]{1,4}$/i.test(str):/^([\da-f]{1,4}:){7}[\da-f]{1,4}$/i.test(str));
}

校验是否为中国大陆第二代居民身份证

校验规则：

共18位，最后一位可为X(大小写均可)
不能以0开头
出生年月日会进行校验：年份只能为18/19/2*开头，月份只能为01-12，日只能为01-31

function isIDCard(str){
    return /^[1-9][0-9]{5}(18|19|(2[0-9]))[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$/.test(str);
}

校验是否为中国大陆邮政编码

参数value为数字或字符串

校验规则：

共6位，且不能以0开头

function isPostCode(value){
    return /^[1-9][0-9]{5}$/.test(value.toString());
}

校验两个参数是否完全相同，包括类型

校验规则：

值相同，数据类型也相同

function same(firstValue,secondValue){
    return firstValue===secondValue;
}

校验字符的长度是否在规定的范围内

校验规则：

minInt为在取值范围中最小的长度
maxInt为在取值范围中最大的长度

function lengthRange(str,minLength,maxLength=9007199254740991) {
    return Boolean(str.length >=minLength && str.length <=maxLength);
}

校验字符是否以字母开头

校验规则：

必须以字母开头
开头的字母不区分大小写

function letterBegin(str){
    return /^[A-z]/.test(str);
}

校验字符是否为纯数字(整数)

校验规则：

字符全部为正整数(包含0)
可以以0开头

function pureNum(str) {
    return /^[0-9]*$/.test(str);
}

function anysicPunctuation(str){
    if(!str) return null;
    let arr=str.split('').map(item=> {
        return item='\\' + item;
    });
    return arr.join('|');
}

function getPunctuation(str){
    return anysicPunctuation(str) || '\\~|\\`|\\!|\\@|\\#|\\$|\\%|\\^|\\&|\\*|\\(|\\)|\\-|\\_|\\+|\\=|\\||\\\|\\[|\\]|\\{|\\}|\\;|\\:|\\"|\\\'|\\,|\\<|\\.|\\>|\\/|\\?';
}

function getExcludePunctuation(str){
    let regexp=new RegExp(`[${anysicPunctuation(str)}]`,'g');
    return getPunctuation(' ~`!@#$%^&*()-_+=\[]{};:"\',<.>/?'.replace(regexp,''));
}

返回字符串构成种类(字母，数字，标点符号)的数量

LIP缩写的由来：L(letter 字母) + I(uint 数字) + P(punctuation 标点符号)

参数punctuation的说明：

punctuation指可接受的标点符号集
若需自定义符号集，例如“仅包含中划线和下划线”，将参数设置为"-_"即可
若不传值或默认为null，则内部默认标点符号集为除空格外的其他英文标点符号：~`!@#$%^&*()-_+=[]{};:"',<.>/?

function getLIPTypes(str,punctuation=null){
    let p_regexp=new RegExp('['+getPunctuation(punctuation)+']');
    return /[A-z]/.test(str) + /[0-9]/.test(str) + p_regexp.test(str);
}

校验字符串构成的种类数量是否大于或等于参数num的值。通常用来校验用户设置的密码复杂程度。

校验规则：

参数num为需要构成的种类(字母、数字、标点符号)，该值只能是1-3。
默认参数num的值为1，即表示：至少包含字母，数字，标点符号中的1种
若参数num的值为2，即表示：至少包含字母，数字，标点符号中的2种
若参数num的值为3，即表示：必须同时包含字母，数字，标点符号
参数punctuation指可接受的标点符号集，具体设定可参考getLIPTypes()方法中关于标点符号集的解释。

function pureLIP(str,num=1,punctuation=null){
    let regexp=new RegExp(`[^A-z0-9|${getPunctuation(punctuation)}]`);
    return Boolean(!regexp.test(str) && getLIPTypes(str,punctuation)>=num);
}

清除所有空格

function clearSpaces(str){
    return str.replace(/[ ]/g,'');
}

清除所有中文字符(包括中文标点符号)

function clearCNChars(str){
    return str.replace(/[\u4e00-\u9fa5]/g,'');
}

清除所有中文字符及空格

function clearCNCharsAndSpaces(str){
    return str.replace(/[\u4e00-\u9fa5 ]/g,'');
}

除保留标点符号集以外，清除其他所有英文的标点符号(含空格)

全部英文标点符号为： ~`!@#$%^&*()-_+=[]{};:"',<.>/?

参数excludePunctuation指需要保留的标点符号集，例如若传递的值为'_'，即表示清除_以外的其他所有英文标点符号。

function clearPunctuation(str,excludePunctuation=null){
    let regexp=new RegExp(`[${getExcludePunctuation(excludePunctuation)}]`,'g');
    return str.replace(regexp,'');
}

校验是否包含空格

function haveSpace(str) {
    return /[ ]/.test(str);
}

校验是否包含中文字符(包括中文标点符号)

function haveCNChars(str){
    return /[\u4e00-\u9fa5]/.test(str);
}

总结

附笔记链接，阅读往期更多优质文章可移步查看，喜欢的可以给我点赞鼓励哦

、生成随机字符串

我们可以使用 Math.random 生成一个随机字符串，当我们需要一个唯一的 ID 时非常方便。

const randomString=()=> Math.random().toString(36).slice(2)
randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja

2、转义HTML特殊字符

如果您了解 XSS，其中一种解决方案是转义 HTML 字符串。

const escape=(str)=> str.replace(/[&<>"']/g, (m)=> ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
escape('<div class="medium">Hi Medium.</div>') 
// <div class="medium">Hi Medium.</div>

3、将字符串中每个单词的第一个字符大写

此方法用于将字符串中每个单词的第一个字符大写。

const uppercaseWords=(str)=> str.replace(/^(.)|\s+(.)/g, (c)=> c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'

另外，在这里，我要谢谢克里斯托弗·斯特罗利亚-戴维斯，他还跟我分享了他的更加简单的方法，代码如下：

const uppercaseWords=(str)=> str.replace(/^(.)|\s+(.)/g, (c)=> c.toUpperCase())

4、将字符串转换为camelCase

const toCamelCase=(str)=> str.trim().replace(/[-_\s]+(.)?/g, (_, c)=> (c ? c.toUpperCase() : ''));
toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld

5、删除数组中的重复值

删除数组的重复项是非常有必要的，使用“Set”会变得非常简单。

const removeDuplicates=(arr)=> [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6])) 
// [1, 2, 3, 4, 5, 6]

6、展平一个数组

我们经常在面试中受到考验，这可以通过两种方式来实现。

const flat=(arr)=>
    [].concat.apply(
        [],
        arr.map((a)=> (Array.isArray(a) ? flat(a) : a))
    )
// Or
const flat=(arr)=> arr.reduce((a, b)=> (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']

7、从数组中删除虚假值

使用此方法，您将能够过滤掉数组中的所有虚假值。

const removeFalsy=(arr)=> arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']

8、检查一个数字是偶数还是奇数

超级简单的任务，可以通过使用模运算符 (%) 来解决。

const isEven=num=> num % 2===0
isEven(2) // true
isEven(1) // false

9、获取两个数字之间的随机整数

此方法用于获取两个数字之间的随机整数。

const random=(min, max)=> Math.floor(Math.random() * (max - min + 1) + min)
random(1, 50) // 25
random(1, 50) // 34

10、获取参数的平均值

我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。

const average=(...args)=> args.reduce((a, b)=> a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3

11、将数字截断为固定小数点

使用 Math.pow() 方法，可以将一个数字截断为我们在函数中提供的某个小数点。

const round=(n, d)=> Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

12、计算两个日期相差天数

有时候我们需要计算两个日期之间的天数，一行代码就可以搞定。

const diffDays=(date, otherDate)=> Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
diffDays(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

13、从日期中获取一年中的哪一天

如果我们想知道某个日期是一年中的哪一天，我们只需要一行代码即可实现。

const dayOfYear=(date)=> Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
dayOfYear(new Date()) // 74

14、生成一个随机的十六进制颜色

如果你需要一个随机的颜色值，这个函数就可以了。

const randomColor=()=> `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
randomColor() // #9dae4f
randomColor() // #6ef10e

15、将RGB颜色转换为十六进制

const rgbToHex=(r, g, b)=> "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
rgbToHex(255, 255, 255)  // '#ffffff'

16、清除所有cookies

const clearCookies=()=> document.cookie.split(';').forEach((c)=> (document.cookie=c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))

17、检测暗模式

const isDarkMode=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

18、交换两个变量

[foo, bar]=[bar, foo]

19、暂停一会

avaScript概述

1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

二 JavaScript的基础

1 直接编写
    <script>
        alert('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

1、声明变量时不用声明变量类型. 全都使用var关键字;

var a;<br>a=3;

2、一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

3、声明变量时可以不用var. 如果不用var 那么它是全局变量

4、变量命名,首字符只能是字母,下划线,$美元符三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量　

常量：直接在程序中出现的数据值

标识符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
例如：_abc,$abc,abc,abc123是标识符，而1abc不是
JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

2.3.1 数字类型(number)

不区分整型数值和浮点型数值;
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324

整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
浮点数：
使用小数点记录数据
例如：3.4，5.6
使用指数记录数据
例如：4.3e23=4.3 x 1023

16进制和8进制数的表达:
16进制数据前面加上0x，八进制前面加0;16进制数是由0-9,A-F等16个字符组成;8进制数由0-7等8个数字组成

16进制和8进制与2进制的换算:

2.3.2 字符串类型(string)

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \:右划线

2.3.3 布尔类型(boolean)

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

2.3.4 Null & Undefined类型

Undefined类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

当函数无明确返回值时，返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null

2.4 运算符

算术运算符：
    +   -    *    /     %       ++        -- 

比较运算符：
    >   >=<    <=!======!==逻辑运算符：
     &&   ||   ！

赋值运算符：=+=-=*=/=字符串运算符：
    +  连接，两边操作数有一个或两个是字符串就做连接运算

2.4.1 算术运算符

注意1: 自加自减

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1；i++相当于i=i+1，i--相当于i=i-1；
递增和递减运算符可以放在变量前也可以放在变量后：--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

注意2: 单元运算符

- 除了可以表示减号还可以表示负号例如：x=-y

+ 除了可以表示加法运算还可以用于字符串的连接例如："abc"+"def"="abcdef"

注意3: NaN

    var d="yuan";
    d=+d;
    alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));//Number

    //NaN特点:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

2.4.2 比较运算符

> >=< <=!======!==

2.4.3 逻辑运算符

if (2>1 && [1,2]){
    console.log("条件与")
}

// 思考返回内容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

2.5 流程控制

顺序结构(从上向下顺序执行)
分支结构
循环结构

2.5.1 顺序结构

    <script>
        console.log(“星期一”);
        console.log(“星期二”);
        console.log(“星期三”);
    </script>

2.5.1 分支结构

if-else结构：

if (表达式){
   语句１;
   ......
   } else{
   语句２;
   .....
   }

功能说明：如果表达式的值为true则执行语句1,否则执行语句2

if-elif－else结构：

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

2.5.2 循环结构

for循环：

语法规则：

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

功能说明：实现条件循环，当条件成立时，执行语句1，否则跳出循环体

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环：

语法规则：

while (条件){
    语句1；
    ...
}

功能说明：运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环；同样支持continue与break语句。

2.5.3 异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

三 JavaScript的对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象
</script>

3.1 String对象

字符串对象创建

字符串创建(两种方式)
① 变量=“字符串”
② 字串对象名称=new String (字符串)

var str1="hello world";

var str1=new String("hello word");

字符串对象的属性和函数

       x.length         －－－－获取字符串的长度

 x.toLowerCase()        －－－－转为小写
 x.toUpperCase()        －－－－转为大写
 x.trim()               －－－－去除字符串两边空格       


－－－－字符串查询方法

x.charAt(index)         －－－－str1.charAt(index);－－－－获取指定位置字符，其中index为要获取的字符索引

x.indexOf(findstr,index)－－－－查询字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的数组，如果没有匹配则返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 结果为"world"
                        alert(str3);     // 结果为15
                        

－－－－子字符串处理方法

x.substr(start, length) －－－－start表示开始位置，length表示截取长度
x.substring(start, end) －－－－end是结束位置

x.slice(start, end)     －－－－切片操作字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //结果为"cd"
                            
                            alert(str3); //结果为"efgh"
                            
                            alert(str4); //结果为"cdefg"
                            
                            alert(str5); //结果为"fg"

x.replace(findstr,tostr) －－－－    字符串替换

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//结果为"二"
                                
x.concat(addstr)         －－－－    拼接字符串

3.2 Array对象

3.2.1 数组创建

创建数组的三种方式：

在线咨询

上一篇：为什么网站加载慢，如何加快站点访问速度
下一篇：vue-contextmenu 右键弹出菜单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript工具函数大全

为元素添加on方法

为元素添加trigger方法

转义html标签

HTML标签转义

跨浏览器绑定事件

加入收藏夹

提取页面代码中所有网址

动态加载脚本文件

返回顶部的通用方法

实现base64解码

确认是否是键盘有效输入值

全角半角转换

版本对比

压缩CSS样式代码

获取当前路径

字符串长度截取

时间日期格式转换

跨浏览器删除事件

判断是否以某个字符串结束

返回脚本内容

格式化CSS样式代码

获取cookie值

获得URL中GET参数值

获取移动设备初始化大小

获取页面高度

获取页面scrollLeft

获取页面scrollTop

获取页面可视高度

获取页面可视宽度

获取页面宽度

获取移动设备屏幕宽度

获取网页被卷去的位置

获取URL上的参数

检验URL链接是否有效

获取窗体可见范围的宽与高

获取移动设备最大化大小

判断是否安卓移动设备访问

判断是否苹果移动设备访问

判断是否为数字类型

是否是某类手机型号

判断是否移动设备

判断吗是否手机号码

判断是否是移动设备访问

判断鼠标是否移出事件

判断是否Touch屏幕

判断是否为网址

判断是否打开视窗

加载样式文件

替换地址栏

解决offsetX兼容性问题

打开一个窗体通用方法

将键值对拼接成URL带参数

去掉url前缀

替换全部

resize的操作

滚动到顶部

设置cookie值

设为首页

按字母排序，对每行进行数组排序

延时执行

判断是否以某个字符串开头

清除脚本内容

时间个性化输出功能

全角转换为半角函数

半角转换为全角函数

金额大写转换函数

清除空格

随机数时间戳

实现utf8解码

校验是否为一个数字，以及该数字小数点位数是否与参数floats一致

校验是否为非零的正整数

校验是否为非零的正整数

校验是否为非零的负整数

校验整数是否在取值范围内

校验是否为中国大陆手机号

校验是否为中国大陆传真或固定电话号码

校验是否为邮箱地址

校验是否为QQ号码

校验字符串构成的种类数量是否大于或等于参数num的值。通常用来校验用户设置的密码复杂程度。