JS功能封裝

自救丶發表於2020-08-17

適配rem

    /*適配rem*/
    //使用方式很簡單,比如效果圖上,有張圖片。寬高都是100px;
    //樣式寫法就是
    // img{
    //     width:1rem;
    //     height:1rem;
    // }
    //這樣的設定,比如在螢幕寬度大於等於750px裝置上,1rem=100px;圖片顯示就是寬高都是100px
    //比如在iphone6(螢幕寬度:375)上,375/750*100=50px;就是1rem=50px;圖片顯示就是寬高都是50px;
    getFontSize: function() {
        var doc = document,
            win = window;
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                //如果螢幕大於750(750是根據我效果圖設定的,具體數值參考效果圖),就設定clientWidth=750,防止font-size會超過100px
                if (clientWidth > 750) {
                    clientWidth = 750
                }
                //設定根元素font-size大小
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        //螢幕大小改變,或者橫豎屏切換時,觸發函式
        win.addEventListener(resizeEvt, recalc, false);
        //文件載入完成時,觸發函式
        doc.addEventListener('DOMContentLoaded', recalc, false);
    },

判斷是否是微信瀏覽器

function isWechat() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

判斷是否是PC/WAP端

function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

URL引數

    /*設定,獲取URL引數*/
    //獲取url引數
    //getUrlPrmt('segmentfault.com/write?draftId=122000011938')
    //Object{draftId: "122000011938"}
    getUrlPrmt: function(url) {
        url = url ? url : window.location.href;
        let _pa = url.substring(url.indexOf('?') + 1),
            _arrS = _pa.split('&'),
            _rs = {};
        for (let i = 0, _len = _arrS.length; i < _len; i++) {
            let pos = _arrS[i].indexOf('=');
            if (pos == -1) {
                continue;
            }
            let name = _arrS[i].substring(0, pos),
                value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
            _rs[name] = value;
        }
        return _rs;
    },
    //設定url引數
    //setUrlPrmt({'a':1,'b':2})
    //a=1&b=2
    setUrlPrmt: function(obj) {
        let _rs = [];
        for (let p in obj) {
            if (obj[p] != null && obj[p] != '') {
                _rs.push(p + '=' + obj[p])
            }
        }
        return _rs.join('&');
    },

判斷是否為空

function isEmpty(val){
    if(typeof val == "undefined" || val == null || val == ""){
        return true;
    } else {
        return false;
    }
}

設定、獲取、刪除、清除sessionStorage(localStorage也是同樣操作)

function setSessionStorage(key, value) {
  sessionStorage.setItem(key, value)//設定
}

function getSessionStorage(key) {
  return sessionStorage.getItem(key)//獲取
}

function delSessionStorage(key) {
  sessionStorage.removeItem(key) //清除單個
}

function clearSessionStorage() {
  sessionStorage.clear()//清除全部
}
//

陣列方法封裝

// 陣列最小值
function arrayMin(arr) {
  return Math.min.apply(null, arr)
}
// 陣列並集
function arrayUnion(arr1, arr2) {
  return [...new Set([...arr1, ...arr2])]
}
// 陣列交集
function arrayIntersect(arr1, arr2) {
  // let arr3 = [...arr1].filter(value => arr2.includes(value))
  // return [...new Set([...arr3])]
  return [...new Set([...arr1].filter(value => arr2.includes(value)))]
}
// 陣列差集
function arrayDiff(arr1, arr2) {
  return [...new Set([...arr1].filter(value => !arr2.includes(value)))]
}
// 陣列去重
function arrayUnique(arr) {
  return Array.from(new Set(arr))
}

正則匹配

      /*檢測字串*/
      //checkType('165226226326','phone')
      //false
      //大家可以根據需要擴充套件
      var checkType = function(str, type) {
          switch (type) {
              case 'email'://郵箱
                  return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
              case 'phone'://手機
                  return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
              case 'tel'://座機?
                  return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
              case 'number'://數字
                  return /^[0-9]$/.test(str);
              case 'english'://英語
                  return /^[a-zA-Z]+$/.test(str);
              case 'chinese'://中文
                  return /^[\u4E00-\u9FA5]+$/.test(str);
              case 'lower'://小寫
                  return /^[a-z]+$/.test(str);
              case 'upper'://大寫
                  return /^[A-Z]+$/.test(str);
              default:
                  return true;
          }
      }
  //身份證格式驗證
  function checkIdCard (idCard) {
    var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
    //如果通過該驗證,說明身份證格式正確,但準確性還需計算
    if (regIdCard.test(idCard)) {
      if (idCard.length == 18) {
        var idCardWi = new Array(7,  9,  10,  5,  8,  4,  2,  1,  6,  3,  7,  9,  10,  5,  8,  4,  2)  //將前17位加權因子儲存在陣列裡
        var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2) //這是除以11後,可能產生的11位餘數、驗證碼,也儲存成陣列
        var idCardWiSum = 0 //用來儲存前17位各自乖以加權因子後的總和
        for (var i = 0; i < 17; i++) {
          idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i]
        }
        var idCardMod = idCardWiSum % 11 //計算出校驗碼所在陣列的位置
        var idCardLast = idCard.substring(17) //得到最後一位身份證號碼
        //如果等於2,則說明校驗碼是10,身份證號碼最後一位應該是X
        if (idCardMod == 2) {
          if (idCardLast == 'X' || idCardLast == 'x') {
            return true
          } else {
            return false
          }
        } else {
          //用計算出的驗證碼與最後一位身份證號碼匹配,如果一致,說明通過,否則是無效的身份證號碼
          if (idCardLast == idCardY[idCardMod]) {
            return true
          } else {
            return false
          }
        }
      }
    } else {
      return false
    }
  }

檢測密碼強度

    /*檢測密碼強度*/
    //checkPwd('12asdASAD')
    //3(強度等級為3)
    var checkPwd = function(str) {
        var nowLv = 0;
        if (str.length < 6) {
            return nowLv
        };
        if (/[0-9]/.test(str)) {
            nowLv++
        };
        if (/[a-z]/.test(str)) {
            nowLv++
        };
        if (/[A-Z]/.test(str)) {
            nowLv++
        };
        if (/[\.|-|_]/.test(str)) {
            nowLv++
        };
        return nowLv;
    }

日期格式化

//格式如:2020-08-17 16:11:18
var curentTime = function (time) {
var d = time ? new Date(time) : new Date();
var localTime = d.getTime();
var localOffset = d.getTimezoneOffset() * 60000; //獲得當地時間偏移的毫秒數
var utc = localTime + localOffset + 3600000 * 8;
var now = new Date(utc);

var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //時
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //秒

var clock = year + "-";

if (month < 10)
clock += "0";

clock += month + "-";

if (day < 10)
clock += "0";

clock += day + " ";

if (hh < 10)
clock += "0";

clock += hh + ":";

if (mm < 10)
clock += "0";

clock += mm + ":";

if (ss < 10)
clock += "0";

clock += ss;

return (clock);
}
//格式如 2020年08月17日 16:19:54
    var getDates = function(data) {
        var str = ""; //儲存時間的字串
        //獲取年
        var year = dt.getFullYear();
        //獲取月
        var month = dt.getMonth() + 1;
        //獲取日
        var day = dt.getDate();
        //獲取小時
        var hour = dt.getHours();
        //獲取分鐘
        var min = dt.getMinutes();
        //獲取秒
        var sec = dt.getSeconds();
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
        return str;
    }

去除空格

    //  type 1-所有空格  2-前後空格  3-前空格 4-後空格
    var trim = function(str, type) {
        switch (type) {
            case 1:
                return str.replace(/\s+/g, "");
            case 2:
                return str.replace(/(^\s*)|(\s*$)/g, "");
            case 3:
                return str.replace(/(^\s*)/g, "");
            case 4:
                return str.replace(/(\s*$)/g, "");
            default:
                return str;
        }
    }

字串處理

    /*type
    1:首字母大寫   
    2:首頁母小寫 其他大寫
    3:大小寫轉換
    4:全部大寫
    5:全部小寫
     */
    //changeCase('asdasd',1)
    //Asdasd
    changeCase: function(str, type) {
        function ToggleCase(str) {
            var itemText = ""
            str.split("").forEach(
                function(item) {
                    if (/^([a-z]+)/.test(item)) {
                        itemText += item.toUpperCase();
                    } else if (/^([A-Z]+)/.test(item)) {
                        itemText += item.toLowerCase();
                    } else {
                        itemText += item;
                    }
                });
            return itemText;
        }

        switch (type) {
            case 1:
                return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
                    return v1.toUpperCase() + v2.toLowerCase();
                });
            case 2:
                return str.replace(/^(\w)(\w+)/, function(v, v1, v2) {
                    return v1.toLowerCase() + v2.toUpperCase();
                });
            case 3:
                return ToggleCase(str);
            case 4:
                return str.toUpperCase();
            case 5:
                return str.toLowerCase();
            default:
                return str;
        }
    },

返回陣列(字串)出現最多的元素和次數

    /*返回陣列(字串)出現最多的元素和次數*/
    //arr, rank->長度,預設為陣列長度,ranktype,排序方式,預設降序
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])預設情況,返回所有元素出現的次數
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)傳參(rank=3),只返回出現次數排序前三的
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)傳參(ranktype=1,rank=null),升序返回所有元素出現次數
    //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)傳參(rank=3,ranktype=1),只返回出現次數排序(升序)前三的
    var getCount = function(arr, rank,ranktype) {
        var obj = {};
        var k, arr1 = [];
        //記錄每一元素出現的次數
        for (var i = 0, len = arr.length; i < len; i++) {
            k = arr[i];
            if (obj[k]) {
                obj[k]++;
            } else {
                obj[k] = 1;
            }
        }
        //儲存結果{el-'元素',count-出現次數}
        for (var o in obj) {
            arr1.push({
                el: o,
                count: obj[o]
            });
        }
        //排序(降序)
        arr1.sort(function(n1, n2) {
            return n2.count - n1.count
        });
        //如果ranktype為1,則為升序,反轉陣列
        if (ranktype === 1) {
            arr1 = arr1.reverse();
        }
        var rank1 = rank || arr1.length;
        return arr1.slice(0, rank1);
    }

隨機返回一個範圍內的數字

    /*隨機返回一個範圍內的數字*/
    randomNumber: function(n1, n2) {
        //randomNumber(5,10)
        //返回5-10的隨機整數,包括5,10
        if (arguments.length === 2) {
            return Math.round(n1 + Math.random() * (n2 - n1));
        }
        //randomNumber(10)
        //返回0-10的隨機整數,包括0,10
        else if (arguments.length === 1) {
            return Math.round(Math.random() * n1)
        }
        //randomNumber()
        //返回0-255的隨機整數,包括0,255
        else {
            return Math.round(Math.random() * 255)
        }
    },

現金漢字大寫轉換

    /*現金額大寫轉換*/
    //upDigit(168752632)
    //"人民幣壹億陸仟捌佰柒拾伍萬貳仟陸佰叄拾貳元整"
    //upDigit(1682)
    //"人民幣壹仟陸佰捌拾貳元整"
    //upDigit(-1693)
    //"欠人民幣壹仟陸佰玖拾叄元整"
    upDigit: function(n) {
        var fraction = ['角', '分', '釐'];
        var digit = ['零', '壹', '貳', '叄', '肆', '伍', '陸', '柒', '捌', '玖'];
        var unit = [
            ['元', '萬', '億'],
            ['', '拾', '佰', '仟']
        ];
        var head = n < 0 ? '欠人民幣' : '人民幣';
        n = Math.abs(n);
        var s = '';
        for (var i = 0; i < fraction.length; i++) {
            s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        s = s || '整';
        n = Math.floor(n);
        for (var i = 0; i < unit[0].length && n > 0; i++) {
            var p = '';
            for (var j = 0; j < unit[1].length && n > 0; j++) {
                p = digit[n % 10] + unit[1][j] + p;
                n = Math.floor(n / 10);
            }
            //s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')+ unit[0][i] + s; 
            s = p + unit[0][i] + s;
        }
        return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
    },

生成六位不重複驗證碼函式

 function methods() {
                //定義儲存6位驗證碼的字串
                var a = "";
                //定義計數器
                var count = 0;
                while(true) { //生成驗證碼
                    var y = parseInt(Math.random() * 10);
                    //不重複判斷,將生成的驗證碼y和最後的a去對比
                    if(a.indexOf(y) == -1) {
                        a = a + y;
                        count++;
                    }
                    if(count == 6) //判斷驗證碼是不是6位
                    {
                        break;
                    }
                }
                return a;
            }

   console.log(methods());

獲取驗證碼流程

    var _code = "";
    var isClick = true;
    function GetCode(ele) {

        var phone = $("#phone").val();

        if (phone == "") {
            window.wxc.xcConfirm("請輸入手機號!", { title: "提示:" });
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            window.wxc.xcConfirm("手機號不合法!", { title: "提示:" });
            return;
        }

        if (isClick) {
            isClick = false;
            var timer;
            var n = 60;
            if (n == 60) {
                clearInterval(timer)
            };
            var that = ele;
            timer = setInterval(function () {
                n--;
                if (n == 0) {
                    clearInterval(timer);
                    that.innerHTML = "重新獲取";
                    isClick = true;
                    n = 60;
                } else {
                    n >= 10 ? that.innerHTML = n + 's後重發' : that.innerHTML = '0' + n + 's後重發';
                }
            }, 1000);
        }
    }

防抖,節流

//節流
function throttle(fn, interval = 500) {
                let run = true;
                return function() {
                    if(!run) return;
                    run = false;
                    setTimeout(() => {
                        fn.apply(this, arguments);
                        run = true;
                    }, interval);
                };
  }
//防抖
 function debounce(fn, interval = 500) {
              let timeout = null;
            
              return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                  fn.apply(this, arguments);
                }, interval);
              };
   }

獲取裝置號,安卓,ios,web

function getDeviceType() {
  var deviceType = 'WEB' //其他
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 
  if (isAndroid) {
    deviceType = 'ANDROID'
  } else if (isiOS) {
    deviceType = 'IOS'
  }
  return deviceType
}

相關文章