前端 | js常用代碼塊都在這等你拿走。

可直接到我的前端站去看。

手機號中間四位顯示星號

function handelMobile(value){
  if(!value) return '';
  if(typeof value !== 'string') value = value.toString();
  return value.replace(/^(\d{3})\d*(\d{4})$/,'$1****$2');
}
// handelMobile(13923451241)  輸出:"139****1241"

日期格式化函數

// 也可獲取當前日期:formatTime(new Date())
function formatTime(d){ // 輸出為 : 2019-10-08 17:50:44  星期二
    const year = d.getFullYear();
    const month = d.getMonth() + 1;
    const day = d.getDate();
    let days = d.getDay(); 
    const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    const week = weeks[days];
    const hour = d.getHours();
    const minute = d.getMinutes();
    const second = d.getSeconds();

    return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':') + '  ' + week;
},
function formatNumber(n){
    n = n.toString()
    return n[1] ? n : '0' + n
}

清除空格

// 清除所有空格
function removeAllSpace(str) {
    return str.replace(/\s+/g, "");
}

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

復制文本內容到剪切板

<div  id="copeText">12345678</div>
<input type="button" onClick="copyUrl()" value="點擊復制代碼" />
function copeText(){
    var copeText=document.getElementById("copeText").innerText;
    var oInput = document.createElement('input');
        oInput.value = copeText;
        document.body.appendChild(oInput);
        oInput.select(); // 選擇對象
        document.execCommand("Copy"); // 執行瀏覽器復制命令
        document.body.removeChild(oInput)
        // oInput.className = 'oInput';
        // oInput.style.display='none';
        // alert('復制成功');
}

前端生成文件并下載

function createAndDownloadFile(fileName, content) {
    const aTag = document.createElement('a');
    const blob = new Blob([content]);
    aTag.download = `${fileName}.json`;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}

// 以下是一個例子,親測有效
axios({ 
    method: 'post',
    url: url, 
    data: paramsObj, 
    responseType: 'blob' // 表明返回服務器返回的數據類型
}).then((res) => { // 處理返回的文件流
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}); 
    const aLink = document.createElement('a');
    document.body.appendChild(aLink);
    aLink.style.display='none';
    const objectUrl = window.URL.createObjectURL(blob);
    aLink.href = objectUrl;
    aLink.download = '詞云數據'; //下載后的文件名稱
    aLink.click();
    document.body.removeChild(aLink);//這句是針對火狐的,沒有這句話,火狐就根本導不出文件來,火狐對a.download似乎有點個人意見,但Chrome可以,折騰了好久。
})

axios全局設置

//授權過期后axios操作跳轉到登錄頁的一種全局處理方式 
axios.interceptors.request.use(
    config => {
        //如果 requestedWith 為 null,則為同步請求。
        //設置 requestedWith 為 XMLHttpRequest 則為 Ajax 請求。
        config.headers['X-Requested-With'] = 'XMLHttpRequest';
        return config
    },function(error){
        return Promise.reject(error)
    }
)
axios.interceptors.response.use(function (response) {
    return response
}, function (error) {
    if (error.response.status == 401){
        window.location.href="/admin/login";
    }
    if (error.response.status == 403){
        console.log("對不起,您的權限不足");
    }
    if (error.response.status == 600){
        console.log({text:'網絡異常'});
    }
    if (error.response.status == 601){
        console.log({text:'網絡異常'});
    }
    //return Promise.reject(error)
})

判斷是否為Iphone X

// 如何判斷是不是Iphone X
function isIphoneX(){
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

判斷為IOS還是安卓

// true:ios  false:android
function isIOSFn(){
    var isIOS = true;
    var u = navigator.userAgent, app = navigator.appVersion;
    var _isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
    var _isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    if(_isAndroid){
        isIOS = false;
    }
    if(_isiOS){
        isIOS = true;
    }
    return isIOS;
}

判斷是PC還是Mobile

function isPc(){
    //true:是PC端  false:是移動端
    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;
}

js動態生成二維碼

<div id="qrcode"></div>
#qrcode{
    width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;
}
// 引入外部js文件
// QRCode.js 是一個用于生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標簽,再通過 HTML5 Canvas 繪制而成,不依賴任何庫
<script src="QRCode.js"></script>

// 方法調用
var qrcode = new QRCode(document.getElementById("qrcode"), { width : 200,height : 200 }); 
var token='params';
var QRCodeUrl='http:\\www.baidu.com'+'/Share/ScanQRCode?token='+token;
qrcode.makeCode(QRCodeUrl); 

// QRCode.js文件
下載地址:http://files.cnblogs.com/files/weishuanbao/QRCode.js

數組去重

更多方法

//1.  最簡單的方法就是利用 ES6 的 Set 
var s = new Set([1, 2, 3, 3, '3']);  // Set {1, 2, 3, "3"}
Array.from(s);  // 輸出為:[1, 2, 3, "3"]

//2. 利用 filter 可以巧妙地去除 Array 的重復元素
var r,arr = ['apple', 'strawberry','awgpearkhl', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self){
    return self.indexOf(element) === index;
});
r;

千位分隔符

//1. 使用正則表達式  下面語句都輸出為: "123,456,789"
String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");   
    
//2.使用toLocaleString()方法
(123456789).toLocaleString('en-US');

如何判斷一個變量是否為數組(isArray)

// 1、instanceof
function isArray (obj) {
  return obj instanceof Array;
}

// 2、Array對象的 isArray方法
function isArray (obj) {
  return Array.isArray(obj);
}

// 3、Object.prototype.toString
function isArray (obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}

將數字轉換為大寫金額

   /**
 * 將數字轉換為大寫金額
 * @param Num 數值
 // 調用:changeToChinese(8998.2) 輸出為:"捌仟玖佰玖拾捌元貳角"
 * */
function changeToChinese(Num) {
  //判斷如果傳遞進來的不是字符的話轉換為字符
  if (typeof Num === "number")  Num = new String(Num);
  Num = Num.replace(/,/g, "") //替換tomoney()中的“,”
  Num = Num.replace(/ /g, "") //替換tomoney()中的空格
  Num = Num.replace(/¥/g, "") //替換掉可能出現的¥字符
  if (isNaN(Num)) return "";
  //字符處理完畢后開始轉換,采用前后兩部分分別轉換
  var part = String(Num).split(".");
  var newchar = "";
  //小數點前進行轉化
  for (var i = part[0].length - 1; i >= 0; i--) {
    if (part[0].length > 10) return "";
    var tmpnewchar = ""
    var perchar = part[0].charAt(i);
    switch (perchar) {
      case "0":
        tmpnewchar = "零" + tmpnewchar;
        break;
      case "1":
        tmpnewchar = "壹" + tmpnewchar;
        break;
      case "2":
        tmpnewchar = "貳" + tmpnewchar;
        break;
      case "3":
        tmpnewchar = "叁" + tmpnewchar;
        break;
      case "4":
        tmpnewchar = "肆" + tmpnewchar;
        break;
      case "5":
        tmpnewchar = "伍" + tmpnewchar;
        break;
      case "6":
        tmpnewchar = "陸" + tmpnewchar;
        break;
      case "7":
        tmpnewchar = "柒" + tmpnewchar;
        break;
      case "8":
        tmpnewchar = "捌" + tmpnewchar;
        break;
      case "9":
        tmpnewchar = "玖" + tmpnewchar;
        break;
    }
    switch (part[0].length - i - 1) {
      case 0:
        tmpnewchar = tmpnewchar + "元";
        break;
      case 1:
        if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
        break;
      case 2:
        if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
        break;
      case 3:
        if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
        break;
      case 4:
        tmpnewchar = tmpnewchar + "萬";
        break;
      case 5:
        if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
        break;
      case 6:
        if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
        break;
      case 7:
        if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
        break;
      case 8:
        tmpnewchar = tmpnewchar + "億";
        break;
      case 9:
        tmpnewchar = tmpnewchar + "拾";
        break;
    }
    var newchar = tmpnewchar + newchar;
  }
  //小數點之后進行轉化
  if (Num.indexOf(".") != -1) {
    if (part[1].length > 2) {
      // alert("小數點之后只能保留兩位,系統將自動截斷");
      part[1] = part[1].substr(0, 2)
    }
    for (i = 0; i < part[1].length; i++) {
      tmpnewchar = ""
      perchar = part[1].charAt(i)
      switch (perchar) {
        case "0":
          tmpnewchar = "零" + tmpnewchar;
          break;
        case "1":
          tmpnewchar = "壹" + tmpnewchar;
          break;
        case "2":
          tmpnewchar = "貳" + tmpnewchar;
          break;
        case "3":
          tmpnewchar = "叁" + tmpnewchar;
          break;
        case "4":
          tmpnewchar = "肆" + tmpnewchar;
          break;
        case "5":
          tmpnewchar = "伍" + tmpnewchar;
          break;
        case "6":
          tmpnewchar = "陸" + tmpnewchar;
          break;
        case "7":
          tmpnewchar = "柒" + tmpnewchar;
          break;
        case "8":
          tmpnewchar = "捌" + tmpnewchar;
          break;
        case "9":
          tmpnewchar = "玖" + tmpnewchar;
          break;
      }
      if (i == 0) tmpnewchar = tmpnewchar + "角";
      if (i == 1) tmpnewchar = tmpnewchar + "分";
      newchar = newchar + tmpnewchar;
    }
  }
  //替換所有無用漢字
  while (newchar.search("零零") != -1)
    newchar = newchar.replace("零零", "零");
  newchar = newchar.replace("零億", "億");
  newchar = newchar.replace("億萬", "億");
  newchar = newchar.replace("零萬", "萬");
  newchar = newchar.replace("零元", "元");
  newchar = newchar.replace("零角", "");
  newchar = newchar.replace("零分", "");
  if (newchar.charAt(newchar.length - 1) == "元") {
    newchar = newchar + "整"
  }
  return newchar;
}

將阿拉伯數字翻譯成中文的大寫數字

/**
 * 將阿拉伯數字翻譯成中文的大寫數字
 * @param num 數字
 // numberToChinese(59999.12) 輸出為:"五萬九仟九百九十九點一二"
 * */

function numberToChinese(num) {
  var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
  var BB = new Array("", "十", "百", "仟", "萬", "億", "點", "");
  var a = ("" + num).replace(/(^0*)/g, "").split("."),
    k = 0,
    re = "";
  for (var i = a[0].length - 1; i >= 0; i--) {
    switch (k) {
      case 0:
        re = BB[7] + re;
        break;
      case 4:
        if (!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
          .test(a[0]))
          re = BB[4] + re;
        break;
      case 8:
        re = BB[5] + re;
        BB[7] = BB[5];
        k = 0;
        break;
    }
    if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
      re = AA[0] + re;
    if (a[0].charAt(i) != 0)
      re = AA[a[0].charAt(i)] + BB[k % 4] + re;
    k++;
  }

  if (a.length > 1) // 加上小數部分(如果有小數部分)
  {
    re += BB[6];
    for (var i = 0; i < a[1].length; i++)
      re += AA[a[1].charAt(i)];
  }
  if (re == '一十')
    re = "十";
  if (re.match(/^一/) && re.length == 3)
    re = re.replace("一", "");
  return re;
}

JS獲取瀏覽器名字及版本號

工作中需要通過JS去獲取當前使用的瀏覽器的名字以及版本號,網上大堆資料都有一個關鍵詞是 navigator.appName,但是這個方法獲取的瀏覽器的名字只有兩種要么是IE要么就是Netscap,倒是可以用來判斷是否使用了IE,但是我想獲取具體的瀏覽器產品名字比如 Firefox,Chrome等。所以只好通過navigator.userAgent,但是這個字符串是非常長的,分析他的特征,通過正則表達式來解決這個問題是不錯的方法。

  • 獲取瀏覽器名字+版本字符串
function getBrowserInfo() {
    var agent = navigator.userAgent.toLowerCase();
    var regStr_ie = /msie [\d.]+;/gi;
    var regStr_ff = /firefox\/[\d.]+/gi
    var regStr_chrome = /chrome\/[\d.]+/gi;
    var regStr_saf = /safari\/[\d.]+/gi;
    //IE
    if (agent.indexOf("msie") > 0) {
        return agent.match(regStr_ie);
    }
    //firefox
    if (agent.indexOf("firefox") > 0) {
        return agent.match(regStr_ff);
    }
    //Chrome
    if (agent.indexOf("chrome") > 0) {
        return agent.match(regStr_chrome);
    }
    //Safari
    if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
        return agent.match(regStr_saf);
    }
}
  • 然后獲取版本號
var browser = getBrowserInfo() ;
alert(browser);  //browser 為當前瀏覽器名稱以及版本號
var verinfo = (browser+"").replace(/[^0-9.]/ig,""); //verinfo 為當前瀏覽器版本號

vue-cli 項目構建

在node.js 以及npm安裝的前提下。用vue-cli腳手架簡單構建一個項目。

  • $ npm install -g vue-cli
  • $ vue init webpack my-project
  • $ cd my-project
  • $ npm install
  • $ npm run dev

jq | 移動上拉加載

//控制頁面 滾動的時候 一次請求一遍  無數據時 goLoadData = false;
var goLoadData = true; 
$(document).ready(function(){
    $('body').scroll(function(e) {  
        if ((this.scrollHeight - (this.scrollTop + this.clientHeight)  < 200 )){
            if(goLoadData){
                //加載下一頁數據
                goLoadData = false;
            }   
        }else{
            // 沒有滾動到底端TODO 其他處理
        }
    }); 
});

jq | ajaxSetup()為ajax請求瘦身

/*  當頁面有很多ajax請求,且這些請求的參數比如url、type、dataType都一樣,
    你會在每個請求里把這些參數都寫一遍還是另辟蹊徑?其實ajax有一個ajaxSetup方法,
    它就是用來設置全局ajax默認選項的。有了它,再也不用在每個ajax請求中把相同的參數都寫一遍了。
*/
$.ajaxSetup({
    url: '/api/',
    type: 'post',
    dataType: 'json',
    error: function() {
        alert('調用接口失敗');
        return false;
    }
});
/*  此外,還有一個經常遇到的場景——在每次請求開始的時候,
    需要顯示一個loading動畫,當請求結束時動畫隱藏。
    對于這個,jQuery也是有封裝好了的方法供我們去使用噠。
*/
$('#loading').ajaxStart(function(){
    $(this).show();
}).ajaxStop(function(){
    $(this).hide();
});

//例如:
$.ajaxSetup({
    dataType:"json",
    timeout:10000,
    statusCode:{
        401:function(data){
            location.href="/admin/login";
        },
        403:function(data){
            alert("對不起,您的權限不足");
        },
        600:function(){
            alert({text:'網絡異常'});
        },
        601:function(){
            alert({text:'網絡異常'});
        },
    }
});

var commonJs = {
    post:function(url,data,success,error,timeout,before,compelete){
        commonJs.ajax('POST',url,data,success,error,timeout,before,compelete);
    },
    get:function(url,data,success,error,timeout,before,compelete){
        commonJs.ajax('GET',url,data,success,error,timeout,before,compelete);
    },
    ajax:function(type,url,data,success,error,timeout,before,compelete){
        if(!timeout){
            timeout=10000;
        }
        $.ajax({
            timeout:timeout,
            url:url,
            type:type,
            data:data,
            dataType:'json',
            success:function(data){
                if(data){
                    switch(data.code){
                        case 200:
                            if($.isFunction(success)){
                                success(data);
                            }
                            break;
                        case 400:
                            if($.isFunction(error)){
                                error(data);
                            }else{
                                if(data.msg){
                                    alert(data.msg);
                                }
                            }
                            break;
                        default:
                            if($.isFunction(error)){
                                error(data);
                            }else{
                                if(data.msg){
                                    alert(data.msg);
                                }
                            }
                            break;
                    }
                }
            },
            error:function(){
                  if($.isFunction(error)){
                      try{error()}catch(error){};
                      return;
                  }
            }
        });
    }
}

jq | 添加水印背景

<canvas id="myCanvas"></canvas>
#myCanvas {
    position: absolute;
    z-index: 1000;
    pointer-events: none; 
 }
$(window).resize(resizeCanvas);
function resizeCanvas() {
    var canvas = document.getElementById("myCanvas");
    canvas.width = $(document).width();
    canvas.height = $(document).height();
    init();
};
resizeCanvas();
function init() {
    var doWidth = $(document).width();
    var doHeight = $(document).height();
    //獲取Canvas對象(畫布)
    var canvas = document.getElementById("myCanvas");
    //簡單地檢測當前瀏覽器是否支持Canvas對象,以免在一些不支持html5的瀏覽器中提示語法錯誤
    if (canvas.getContext) {
        //獲取對應的CanvasRenderingContext2D對象(畫筆)
        var ctx = canvas.getContext("2d");
        //設置字體樣式
        ctx.font = "italic small-caps 32px arial";
        //設置字體填充顏色
        ctx.fillStyle = "rgba(220,220,220, .36)";
        //向上旋轉5度
        ctx.rotate(-5 * Math.PI / 180);
        //從坐標點(50,50)開始繪制文字
        var name = '[保密].'+$("#username").val()+$("#txtJobnumber").val();
        //var heightcount = Math.floor(doHeight / 10);
        //var widthcount = Math.floor(doWidth / 8);
        for (var j = -400; j < doHeight; j = j + 200) {
            for (var i = -400; i < doWidth ; i = i + 420) {
                ctx.fillText(name, i, j);
            }
        }
    }
}

jq | 文字列表循環向上滾動

(function($){
    $.fn.myScroll = function(options){
        var defaults = {
            speed:40,  
            rowHeight:24 
        };
        var opts = $.extend({}, defaults, options), intId = [];
        function marquee(obj, step){
            obj.find("ul").animate({ marginTop: '-=1'},0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }
        this.each(function(i){
            var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        });
    }
})(jQuery);

$(function(){
    var _h  = $("div.list_lh li").height();
    _h = _h.toFixed(2);
    $("div.list_lh").myScroll({
        speed:20,   //數值越大,速度越慢
        rowHeight:_h  //li的高度
    });
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容