工作中常用js功能匯總
更新時(shí)間：2020年11月07日 14:03:49 作者：Yushia
這篇文章主要介紹了一些工作中常用js功能的匯總，幫助大家提高工作效率，加深對(duì)js的理解，感興趣的朋友可以了解下
一、javascript 中防止重復(fù)點(diǎn)擊、防止點(diǎn)擊過快
防止重復(fù)點(diǎn)擊可以添加一個(gè)開關(guān),讓這個(gè)開關(guān)默認(rèn)為 true，第一次點(diǎn)擊將其變?yōu)?false,點(diǎn)擊事件的執(zhí)行需要判斷這個(gè)開關(guān)是否為 true，為 true 執(zhí)行,false 不執(zhí)行。例子如下：
var isclick= true;
function click(){
if(isclick){
isclick = false;
//下面添加需要執(zhí)行的事件
...
}
如果只是防止點(diǎn)擊過快，還可以設(shè)置定時(shí)器，在一定時(shí)間后，自動(dòng)將開關(guān)變?yōu)?true，下面例子就是在 500 毫秒后，開關(guān)自動(dòng)變?yōu)?true。
var isclick= true;
function click(){
if(isclick){
isclick= false;
//下面添加需要執(zhí)行的事件
...
//定時(shí)器
setTimeout(function(){
isclick = true;
}, 500);
}
二、jquery 實(shí)現(xiàn) 60 秒倒計(jì)時(shí)
方法一：
var time = 60;
//倒計(jì)時(shí)
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 傳輸參數(shù)（支持中文）
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;
}
//調(diào)用方法
GetQueryString("參數(shù)名")
四、Jq 獲取 from 表單數(shù)據(jù)
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;
}
調(diào)用方法：
var userData. = getFromData(); userData.表單name值 //獲取值
五、設(shè)置，獲取，清空 Cookie
// 設(shè)置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(); //清除當(dāng)前域名下的,例如：m.kevis.com
document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString(); //清除當(dāng)前域名下的，例如 .m.kevis.com
document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString(); //清除一級(jí)域名下的或指定的，例如 .kevis.com
}
}
}
六、js 轉(zhuǎn)換時(shí)間戳-轉(zhuǎn)換成 yyyy-MM-dd HH:mm:ss
//時(shí)間戳轉(zhuǎn)換方法 date:時(shí)間戳數(shù)字
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, "專家認(rèn)證二維碼.png");
} else {//谷歌火狐瀏覽器
downLoad(canvas.toDataURL("image/png"));
}
}
// 下載圖片
function downLoad(url) {
var oA = document.createElement("a");
oA.download = '專家認(rèn)證二維碼';// 設(shè)置下載的文件名，默認(rèn)是'下載'
oA.href = url;
oA.className = "qrcode"
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下載之后把創(chuàng)建的元素刪除
}
八、數(shù)字，金額格式互轉(zhuǎn)正則表達(dá)式
<input type="text" placeholder="請(qǐng)輸入" oninput = "checkInput(this)">
input 輸入實(shí)時(shí)判斷輸入為金額格式
function checkInput(obj) {
var t = obj.value.charAt(0);
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"數(shù)字"和"."以外的字符
obj.value = obj.value.replace(/^[0]+[0-9]*$/gi, ""); //第一位數(shù)字不能為0
obj.value = obj.value.replace(/^\./g, ""); //驗(yàn)證第一個(gè)字符是數(shù)字而不是.
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一個(gè). 清除多余的
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能輸入兩個(gè)小數(shù)
if (t == '-') {
obj.value = '-' + obj.value;
}
}
數(shù)字轉(zhuǎn)金額格式,保留兩位小數(shù)點(diǎn) 例：將 1234567 轉(zhuǎn)換為 1,234,567.00
//s是數(shù)字，n是小數(shù)點(diǎn)位數(shù)
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;
}
金額格式轉(zhuǎn)數(shù)字 例：將 1,234,567.00 轉(zhuǎn)換為 1234567.00
function moneyToNumValue(val) {
var num = val.trim();
var ss = num.toString();
if (ss.length == 0) {
return "0";
}
return ss.replace(/,/g, "");
}
九、canvas 圖片背景設(shè)置為白色或透明
var canvas = document.getElementById("canvas");
var imageData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < imageData.data.length; i += 4) {
// 當(dāng)該像素是透明的，則設(shè)置成白色
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, 0);
var img = canvas.toDataURL("image/jpeg");
img = img.substring(img.indexOf(',') + 1);
for (var i = 0; i < imageData.data.length; i += 4) {
// 當(dāng)該像素是白色的，則設(shè)置成透明
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, 0);
十、常用的正則表達(dá)式
//手機(jī)號(hào)正則
var reg = /^1[0-9]{10}$/;
//身份證號(hào)（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})$/;
//調(diào)用方法
!reg.test(phone) //表示不符合手機(jī)號(hào)正則表達(dá)式
十一、JavaScript 獲取完整當(dāng)前域名
window.location.protocol+"http://"+window.location.host; // 返回https://mp.csdn.net window.location.host; //返回url 的主機(jī)部分，例如：mp.csdn.net window.location.hostname; //返回mp.csdn.net window.location.href; //返回整個(gè)url字符串(在瀏覽器中就是完整的地址欄) window.location.pathname; //返回/a/index.php或者/index.php window.location.protocol; //返回url 的協(xié)議部分，例如： http:，ftp:，maito:等等。 window.location.port //url 的端口部分，如果采用默認(rèn)的80端口，那么返回值并不是默認(rèn)的80而是空字符
十二、base64 圖片壓縮
//壓縮base64方法
function dealImage(base64, w, callback) {
var newImage = new Image();
var quality = 0.6; //壓縮系數(shù)0-1之間
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url為外域時(shí)需要
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, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //壓縮語(yǔ)句
callback(base64); //必須通過回調(diào)函數(shù)返回，否則無(wú)法及時(shí)拿到該值
}
}
以上就是工作中常用js的匯總的詳細(xì)內(nèi)容，更多關(guān)于常用js的匯總的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- JavaScript讀取本地文件常用方法流程解析
- JavaScript常用工具函數(shù)庫(kù)匯總
- JavaScript常用8種數(shù)組去重代碼實(shí)例
- JS數(shù)據(jù)類型判斷的幾種常用方法
- 國(guó)內(nèi)常用的js類庫(kù)大全(CDN公共庫(kù))
- JS刪除數(shù)組指定值常用方法詳解
- JS數(shù)組的常用10種方法詳解
- JavaScript交換變量的常用方法小結(jié)【4種方法】
- JavaScript常用工具函數(shù)大全
- JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能分析
- JS操作json對(duì)象key、value的常用方法分析
相關(guān)文章
Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯?jiǎn)單實(shí)例介紹
這篇文章主要介紹了Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯?jiǎn)單實(shí)例介紹的相關(guān)資料,這里附有實(shí)例代碼幫助大家學(xué)習(xí)理解，需要的朋友可以參考下2016-12-12
javascript下操作css的float屬性的特殊寫法...2007-08-08
帶你用原生js寫一個(gè)簡(jiǎn)單的注冊(cè)登錄頁(yè)面
這篇文章主要給大家介紹了關(guān)于如何使用原生js寫一個(gè)簡(jiǎn)單的注冊(cè)登錄頁(yè)面的相關(guān)資料,文中介紹了一個(gè)以js驗(yàn)證表單的簡(jiǎn)潔的注冊(cè)登錄頁(yè)面,需要的朋友可以參考下2023-06-06
js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read p
本文主要介紹了js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
JavaScript中的垃圾回收機(jī)制負(fù)責(zé)自動(dòng)管理內(nèi)存，回收不再使用的對(duì)象所占用的內(nèi)存空間。本文主要介紹了JS中垃圾回收機(jī)制的相關(guān)知識(shí)，需要的可以參考一下2023-04-04
JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例
這篇文章主要介紹了JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了js數(shù)組對(duì)象的includes方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
關(guān)于JavaScript中name的意義沖突示例介紹
這篇文章主要介紹了關(guān)于JavaScript中name的意義沖突,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03