js Utils封裝方法，手機密碼驗證、模擬toast、promptBox、cookie操作、網絡類型、操作類型、千分位、隨機數等

一個項目少不了的就是utils.js的封裝了，以後還會加，歡迎補充，總結如下：

判斷是否爲空

export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false
  }
  if (val instanceof Array) {
    if (val.length === 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
  }
  return false
}

驗證手機號：11位，以1開頭，其餘10位是數字

export function isMobile(val) {
  let reg = new RegExp(/^1\d{10}$/);
  if (reg.test(val)) {
    return true;
  } else {
    return false;
  }
}
// 加限制
export function isMobile(val) {
  let reg = new RegExp(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/);
  if (reg.test(val)) {
    return true;
  } else {
    return false;
  }
}

驗證密碼：至少6位，數字和英文均可

export function isPwd(val) {
  let reg = new RegExp(/^[0-9A-Za-z]+$/);
  // 4-16位 /^[0-9A-Za-z]{4,16}$/
  if (val == null || val.length < 6) {
    return false;
  }
  if (reg.test(val)) {
    return true;
  } else {
    return false;
  }
}

模擬toast彈窗效果 自定義

export function toast(msg, time) { 
  if (typeof (time) != Number) {
    time = 3000;
  }
  if (validatenull(msg)) {
    return;
  }
  let dom = document.createElement('div');
  dom.id = 'msg_toast';
  dom.innerHTML = '<span>' + msg + '</span>';
  document.getElementById('app').appendChild(dom);
  dom.addEventListener('click', function () {
    document.getElementById('app').removeChild(dom);
  })
  setTimeout(function () {
    document.getElementById('app').removeChild(dom);
  }, time);
}

/* Toast樣式 */

#msg_toast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    text-align: center;
    z-index: 998;
}

#msg_toast span {
    height: 0.88rem;
    max-width: 50%;
    background: #666;
    padding: 0.1rem 0.2rem;
    border-radius: 0.05rem;
    color: #eee;
}

promptBox自定義

//以取消開頭顏色才適配  promptBox({title:'標題',cnt:'內容',desc:'副內容',btns：['取消','確認']},function(){})
export function promptBox(tip, succBack) {
  if (validatenull(tip)) {
    return;
  }
  let dom = document.createElement('div');
  dom.id = 'tipBox';
  if (document.querySelectorAll("#tipBox").length > 0) {
    document.body.removeChild(document.querySelectorAll("#tipBox")[0]);
  }
  let tdesc = ""
  if (!validatenull(tip.desc)) {
    tdesc = '<p class="tdesc">' + tip.desc || "" + '</p>'
  }
  let btns = "";
  let arr = tip.btns;
  if (!validatenull(arr)) {
    for (let i = 0; i < arr.length; i++) {
      let style1 = "";
      let style2 = "";
      if (arr.length > 1 && (i == 0)) {
        style1 = "color:#666;";
        style2 = "border-right: 1px #e0e0e0 solid;box-sizing: border-box;";
      }
      btns += '<div class="btn" style="' + style2 + '" ><button style="' + style1 + '">' + arr[i] + '</button></div>';
    }
  }
  dom.innerHTML = '<div class="blackBg"></div><div class="whiteBg">' +
    '<p class="tTitle">' + (tip.title ? tip.title : "提示") + '</p><p class="cltCnt">' +
    (tip.cnt || "") + '</p>' + tdesc + '<div class="tHandle">' + btns + '</div></div>';
  document.body.appendChild(dom);

  let btnsNodes = document.querySelectorAll("#tipBox button");
  btnsNodes.forEach((value, index) => {
    // console.log(index + ":" + value)
    value.addEventListener("click", function () {
      //點擊就消失所有框框
      document.body.removeChild(document.querySelectorAll("#tipBox")[0]);
      return succBack(index);
    })
  });
  document.querySelector('#tipBox .blackBg').addEventListener('click', function () {
    document.body.removeChild(document.querySelectorAll("#tipBox")[0]);
  })
}

加載中自定義

/*{
  <div id="tipBox" class="loading">
        <div class="blackBg"></div>
        <div class="whiteBg">
          <img src="~img/loading.gif" alt="" class="ico-loading">
          <p>加載中...</p>
        </div>
      </div> 
}*/
export function LoadingBox(msg) { //加載中
  this.msg = msg || "加載中...";
  return this;
}

LoadingBox.prototype.show = function () {
  let dom = document.createElement('div');
  dom.id = 'tipBox';
  dom.className = 'loading'
  dom.innerHTML = '<div class="blackBg"></div><div class="whiteBg">' +
    '<p class="ico-loading"></p><p>' + this.msg + '</p></div>';
  document.getElementById('app').appendChild(dom);
}

LoadingBox.prototype.hide = function () {
  var boxs = document.getElementById("tipBox");
  if (boxs != null) {
    document.getElementById("app").removeChild(boxs);
  }
}

//判斷是否有加載中，有了則刪除
export function isExistLoadingBox() {
  var boxs = document.getElementById("tipBox");
  if (boxs != null) {
    return true
  } else {
    return false
  }
}
//隱藏加載中
export function deleteLoadingBox() {
  var boxs = document.getElementById("tipBox");
  if (boxs != null) {
    document.getElementById("app").removeChild(boxs);
  }
}

/* 提示盒子樣式 */

#tipBox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 960px;
    margin: auto;
    height: 100%;
    z-index: 990;
}

#tipBox .blackBg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

#tipBox .whiteBg {
    position: absolute;
    top: 35%;
    left: 1.06rem;
    right: 1.06rem;
    margin: auto;
    padding-top: 0.22rem;
    text-align: center;
    background: #fff;
    border-radius: 0.2rem;
    z-index: 991;
}

#tipBox .whiteBg .tTitle {
    line-height: 0.75rem;
    font-size: 0.34rem;
    color: #f39800;
    font-weight: bold;
}

#tipBox .whiteBg .cltCnt {
    line-height: 0.44rem;
    padding: 0 0.35rem 0.38rem 0.35rem;
    font-size: 0.30rem;
    color: #666;
}

#tipBox .whiteBg .tdesc {
    line-height: 0.36rem;
    padding: 0 0.35rem 0.38rem 0.35rem;
    font-size: 0.28rem;
    color: #999;
}

#tipBox .whiteBg .tHandle {
    display: flex;
    width: 100%;
    height: 0.88rem;
    border-top: 1px #e0e0e0 solid;
}

#tipBox .whiteBg .tHandle .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    background: transparent;
}


/* #tipBox .whiteBg .tHandle .btn:last-child{
  border-right: 1px #e0e0e0 solid;
  box-sizing: border-box;
} */

#tipBox .whiteBg .tHandle .btn button {
    background: transparent;
    font-size: 0.34rem;
    color: #f39800;
}

#tipBox.loading .blackBg {
    background: rgba(0, 0, 0, 0.1)
}

#tipBox.loading .whiteBg {
    position: absolute;
    top: 45%;
    width: 1.5rem;
    margin: auto;
    padding-top: 0;
    text-align: center;
    border-radius: 0.2rem;
    background: rgba(255, 255, 255, 1);
    /* background: rgba(0, 0, 0, 0.8); */
    padding: 0.2rem;
    z-index: 991;
}

#tipBox.loading .ico-loading {
    display: block;
    width: 100%;
    height: 0.9rem;
    margin: auto;
    background: url(~img/loading4.gif)no-repeat center center;
    background-size: 1.4rem 0.38rem;
}

#tipBox.loading p {
    height: 0.5rem;
    font-size: 0.24rem;
    color: #666;
    /* color: #fff; */
}

rsa加密

/**
 * 
 * rsa加密
 * jsencrypt.js
 */

import JSEncrypt from 'jsencrypt'

export function encryptStr(str) {
  let encrypt = new JSEncrypt();
  let key = "";
  encrypt.setPublicKey(key);
  let data = encrypt.encrypt(str);
  return data;
}

格式化字數 (單位：萬)

/**
 *  格式化字數 (單位：萬)
 *  
 */
export function formatWords(num) {
  return parseInt(Math.ceil(num / 10000)) || 0;
}

獲取地址欄參數

export function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

cookie 操作

//獲取
export function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    // alert(c)
    while (c.charAt(0) == " ") c = c.substring(1);
    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  }
  return "";
}

//設置cookie,增加到vue實例方便全局調用
export function setCookie(c_name, value, expiredays) {
  let exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};

//刪除cookie
export function delCookie(name) {
  let exp = new Date();
  exp.setTime(exp.getTime() - 1);
  let cval = getCookie(name);
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};

判斷網絡類型

export function getNetworkType() {
  var ua = navigator.userAgent;
  var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
  networkStr = networkStr.toLowerCase().replace('nettype/', '');
  var networkType;
  switch (networkStr) {
    case 'wifi':
      networkType = 'wifi';
      break;
    case '4g':
      networkType = '4g';
      break;
    case '3g':
      networkType = '3g';
      break;
    case '3gnet':
      networkType = '3g';
      break;
    case '2g':
      networkType = '2g';
      break;
    default:
      networkType = 'other';
  }
  return networkType;
}

判斷是否是微信瀏覽器

export function isWeiXin(){
  let ua = window.navigator.userAgent.toLocaleLowerCase();
  if(ua.match(/MicroMessenger/i)=="micromessenger"){
    return true
  }else{
    return false
  }
}

ios還是Android

//判斷是ios還是Android（轉載）
export function phoneType(){
  	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
	if (isAndroid) {
	  alert('這是Android');
	}
	if (isiOS) {
	  alert('這是IOS');
	}
	
	if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
	  //alert(navigator.userAgent);
	  alert('這是IOS');
	} else if (/(Android)/i.test(navigator.userAgent)) {
	  //alert(navigator.userAgent);
	  alert('這是Android');
	} else {
	  alert('這是PC');
	};
	--------------------- 
	作者：Smile淡莣 
	來源：CSDN 
	原文：https://blog.csdn.net/luojizhong/article/details/52435526 
	版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！
	
}

JS判斷操作系統類型

//轉載 JS判斷操作系統類型
function detectOS() {
	  var sUserAgent = navigator.userAgent;
	  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
	  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
	  if (isMac) return "Mac";
	  var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
	  if (isUnix) return "Unix";
	  var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
	  if (isLinux) return "Linux";
	  if (isWin) {
	    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 ||sUserAgent.indexOf("Windows 2000") > -1;
	    if (isWin2K) return "Win2000";
	    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
	    if (isWinXP) return "WinXP";
	    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
	    if (isWin2003) return "Win2003";
	    var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
	    if (isWinVista) return "WinVista";
	    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
	    if (isWin7) return "Win7";
	  }
	   return "other";
	}
	
	alert("您的操作系統是：" + detectOS());
	--------------------- 
	作者：Smile淡莣 
	來源：CSDN 
	原文：https://blog.csdn.net/luojizhong/article/details/52435526 
	版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！

獲取隨機數

export function random(target, start) {
  if (typeof target == 'number') {
    var count = target || 5;
    start = start || 1;
    return Math.round(Math.random() * Math.pow(10, count)) * start;
  }
  if ((typeof target == 'object' || typeof target == 'string') && target.hasOwnProperty('length')) {
    var isString = typeof target == 'string';
    if (isString) {
      target = target.split('');
    }
    var obj = [],
      ex = {},
      max = target.length || start || 10;
    var get = function () {
      var key = Math.round(Math.random() * max);
      return key in ex || key == max ? get() : (ex[key] = true) && key;
    };
    if (target.length == 0) {
      for (var i = 0; i < max; i++) {
        obj[i] = get();
      }
    } else {
      for (var i = 0; i < max; i++) {
        obj.push(target[get()]);
      }
    }
    if (isString) {
      return obj.join('');
    }
    return obj;
  }
}

vue滑動跳，置頂、置地

// 步值是10,10ms一跳
export function jumpTotop(step, time) {
  // 平滑滾動，時長500ms，每10ms一跳
  //獲取當前滾動條與頂部的距離
  let distance =
    document.documentElement.scrollTop ||
    document.body.scrollTop ||
    window.pageYOffset;
  let total = 0;
  // 計算每一小段的距離
  let count = distance / step; //總共跳多少次
  if (distance > total) {
    soothUp()
  }

  function soothUp() {
    if (distance > total) {
      distance -= step;
      document.documentElement.scrollTop = distance;
      document.body.scrollTop = distance;
      window.pageYOffset = distance;
      setTimeout(() => {
        soothUp();
      }, time);
    } else {
      document.body.scrollTop = total;
      document.documentElement.scrollTop = total;
      window.pageYOffset = total;
    }
  }
}

自動下載圖片

export function downloadImg(src, name, succBack) {
  let alink = document.createElement("a");
  alink.setAttribute("href", src);
  alink.setAttribute("download", name);
  alink.click();
  succBack()
}

複製

export function copyTxt(txt, copyDom) {
  if (isAndroidSys()) {
    let ta = document.createElement("textarea");
    ta.value = txt;
    ta.setAttribute("readonly", true);
    document.body.appendChild(ta);
    ta.select(); //選擇對象
    let successful = document.execCommand("Copy");
    try {
      Toast(successful ? "複製成功" : "請選中複製");
    } catch (err) { }
    ta.style.display = "none";
  } else {
    window.getSelection().removeAllRanges();
    let range = document.createRange();
    //  選中需要複製的節點
    range.selectNode(copyDom);
    // 執行選中元素
    window.getSelection().addRange(range);
    // 執行 copy 操作
    let successful = document.execCommand("Copy");
    try {
      Toast(successful ? "複製成功!" : "請選中複製!");
    } catch (err) { }
    window.getSelection().removeAllRanges();
  }
}

千分位

// 千分位
export function formatThousand(num) {
  var reg = /\d{1,3}(?=(\d{3})+$)/g;
  return (num + '').replace(reg, '$&,');
}