果文章和筆記能帶您一絲幫助或者啟發，請不要吝嗇你的贊和收藏，你的肯定是我前進的最大動力

為元素添加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是兩個變量　

常量 ：直接在程序中出現的數據值

標識符：

1. 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
2. 常用于表示函數、變量等的名稱
3. 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
4. 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 數組創建

創建數組的三種方式：