溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關分享幾個JavaScript的技巧，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一、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,234,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, 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, 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, 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, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //壓縮語句
callback(base64); //必須通過回調函數返回，否則無法及時拿到該值
}
}上述就是小編為大家分享的分享幾個JavaScript的技巧了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
