工作中常用js的彙總

阿新 • • 發佈：2020-11-09

一、javascript 中防止重複點選、防止點選過快

防止重複點選可以新增一個開關,讓這個開關預設為 true，第一次點選將其變為 false,點選事件的執行需要判斷這個開關是否為 true，為 true 執行,false 不執行。例子如下：

var isclick= true;
function click(){
  if(isclick){
    isclick = false;
    //下面新增需要執行的事件
    ...
  }

如果只是防止點選過快，還可以設定定時器，在一定時間後，自動將開關變為 true，下面例子就是在 500 毫秒後，開關自動變為 true。

var isclick= true;
function click(){
  if(isclick){
    isclick= false;
    //下面新增需要執行的事件
      ...

    //定時器
    setTimeout(function(){
      isclick = true;
    },500);
  }

二、jquery 實現 60 秒倒計時

方法一：

 var time = 60;
//倒計時
function getRandomCode() {
  if (time === 0) {
    time = 60;
    return;
  } else {
    time--;
    $('#time i').text(time);
  }
  setTimeout(function() {
    getRandomCode();
  },1000);

方法二：

var timeClock;
function sendCode() {
  var timer_num = 60;
  timeClock=setInterval(function(){
    timer_num--;
    $('.clock').html(timer_num);

    if (timer_num == 0) {
      clearInterval(timeClock);
      $('.clock').html(60);
    }
  },1000)

三、獲取 URL 傳輸引數（支援中文）

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)','i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return decodeURI(r[2]);
  }
  return null;
}
//呼叫方法
GetQueryString("引數名")

四、Jq 獲取 from 表單資料

function getFromData(id) {
  if (id == undefined) {
    id = "form"
  }
  var data = {};
  var t = $(id).serializeArray();
  $.each(t,function() {
    data[name = this.name] = this.value;
  });
  return data;
}

呼叫方法：

var userData. = getFromData();
userData.表單name值 //獲取值

五、設定，獲取，清空 Cookie

// 設定cookies

function setCookie(name,value) {
  var exp = new Date();
  exp.setTime(exp.getTime() + 60 * 60 * 1000);
  document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}

//讀取cookies
function getCookie(name) {
  var arr,reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

  if (arr = document.cookie.match(reg))

    return unescape(arr[2]);
  else
    return null;
}

// 清楚所有cookies
function clearCookie() {
  var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
  if (keys) {
    for (var i = keys.length; i--;) {
      document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString(); //清除當前域名下的,例如：m.kevis.com
      document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString(); //清除當前域名下的，例如 .m.kevis.com
      document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString(); //清除一級域名下的或指定的，例如 .kevis.com
    }
  }
}

六、js 轉換時間戳-轉換成 yyyy-MM-dd HH:mm:ss

//時間戳轉換方法  date:時間戳數字
function formatDate(date) {
 var date = new Date(date);
 var YY = date.getFullYear() + '-';
 var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
 var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
 var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
 var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
 var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
 return YY + MM + DD +" "+hh + mm + ss;
}

七、canvas 圖片下載(相容各瀏覽器)

// 儲存成png格式的圖片
  document.getElementById("save").onclick = function () {
    var canvas = document.getElementById("canvas");
    if (window.navigator.msSaveOrOpenBlob) {//ie瀏覽器
      var imgData = canvas.msToBlob();
      var blobObj = new Blob([imgData]);
      window.navigator.msSaveOrOpenBlob(blobObj,"專家認證二維碼.png");
    } else {//谷歌火狐瀏覽器
      downLoad(canvas.toDataURL("image/png"));
    }
  }

  // 下載圖片
  function downLoad(url) {
    var oA = document.createElement("a");
    oA.download = '專家認證二維碼';// 設定下載的檔名，預設是'下載'
    oA.href = url;
    oA.className = "qrcode"
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下載之後把建立的元素刪除
  }

八、數字，金額格式互轉正則表示式

<input type="text" placeholder="請輸入" oninput = "checkInput(this)">

input 輸入實時判斷輸入為金額格式

  function checkInput(obj) {
    var t = obj.value.charAt(0);
    obj.value = obj.value.replace(/[^\d.]/g,""); //清除"數字"和"."以外的字元
    obj.value = obj.value.replace(/^[0]+[0-9]*$/gi,""); //第一位數字不能為0
    obj.value = obj.value.replace(/^\./g,""); //驗證第一個字元是數字而不是.
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一個. 清除多餘的
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能輸入兩個小數
    if (t == '-') {
      obj.value = '-' + obj.value;
    }
  }

數字轉金額格式,保留兩位小數點例：將 1234567 轉換為 1,234,567.00

 //s是數字，n是小數點位數
  function fmoney(s,n) {
  n = n > 0 && n <= 20 ? n : 2;
  s = parseFloat((s + "").replace(/[^\d\.-]/g,"")).toFixed(n) + "";
  var l = s.split(".")[0].split("").reverse(),r = s.split(".")[1];
  t = "";
  for (i = 0; i < l.length; i++) {
    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
  }
  return t.split("").reverse().join("") + "." + r;
}

金額格式轉數字例：將 1,567.00 轉換為 1234567.00

function moneyToNumValue(val) {
  var num = val.trim();
  var ss = num.toString();
  if (ss.length == 0) {
    return "0";
  }
  return ss.replace(/,/g,"");
}

九、canvas 圖片背景設定為白色或透明

 var canvas = document.getElementById("canvas");
 var imageData = canvas.getContext("2d").getImageData(0,canvas.width,canvas.height);
    for (var i = 0; i < imageData.data.length; i += 4) {
      // 當該畫素是透明的，則設定成白色
      if (imageData.data[i + 3] == 0) {
        imageData.data[i] = 255;
        imageData.data[i + 1] = 255;
        imageData.data[i + 2] = 255;
        imageData.data[i + 3] = 255;
      }
    }
    canvas.getContext("2d").putImageData(imageData,0);
    var img = canvas.toDataURL("image/jpeg");
    img = img.substring(img.indexOf(',') + 1);
    for (var i = 0; i < imageData.data.length; i += 4) {
      // 當該畫素是白色的，則設定成透明
      if (imageData.data[i] == 255) {
        imageData.data[i] = 0;
        imageData.data[i + 1] = 0;
        imageData.data[i + 2] = 0;
        imageData.data[i + 3] = 0;
      }
    }
    canvas.getContext("2d").putImageData(imageData,0);

十、常用的正則表示式

//手機號正則
var reg = /^1[0-9]{10}$/;

//身份證號（18位）正則
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

// 郵箱正則
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

//呼叫方法
!reg.test(phone) //表示不符合手機號正則表示式

十一、JavaScript 獲取完整當前域名

window.location.protocol+"//"+window.location.host; //  返回https://mp.csdn.net
window.location.host; //返回url 的主機部分，例如：mp.csdn.net
window.location.hostname; //返回mp.csdn.net
window.location.href; //返回整個url字串(在瀏覽器中就是完整的位址列)
window.location.pathname; //返回/a/index.php或者/index.php
window.location.protocol; //返回url 的協議部分，例如： http:，ftp:，maito:等等。
window.location.port //url 的埠部分，如果採用預設的80埠，那麼返回值並不是預設的80而是空字元

十二、base64 圖片壓縮

//壓縮base64方法
function dealImage(base64,w,callback) {
 var newImage = new Image();
 var quality = 0.6; //壓縮係數0-1之間
 newImage.src = base64;
 newImage.setAttribute("crossOrigin",'Anonymous'); //url為外域時需要
 var imgWidth,imgHeight;
 newImage.onload = function() {
 imgWidth = this.width;
 imgHeight = this.height;
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 if (Math.max(imgWidth,imgHeight) > w) {
  if (imgWidth > imgHeight) {
  canvas.width = w;
  canvas.height = w * imgHeight / imgWidth;
  } else {
  canvas.height = w;
  canvas.width = w * imgWidth / imgHeight;
  }
 } else {
  canvas.width = imgWidth;
  canvas.height = imgHeight;
  quality = 0.6;
 }
 ctx.clearRect(0,canvas.height);
 ctx.drawImage(this,canvas.height);
 var base64 = canvas.toDataURL("image/jpeg",quality); //壓縮語句
 callback(base64); //必須通過回撥函式返回，否則無法及時拿到該值
 }
}

以上就是工作中常用js的彙總的詳細內容，更多關於常用js的彙總的資料請關注我們其它相關文章！