一、javascript 中防止重复点击、防止点击过快
防止重复点击可以添加一个开关,让这个开关默认为 true，第一次点击将其变为 false,点击事件的执行需要判断这个开关是否为 true，为 true 执行,false 不执行。例子如下：
|
1
2
3
4
5
6
7
|
var isclick= true;function click(){ if(isclick){ isclick = false; //下面添加需要执行的事件 ... } |
如果只是防止点击过快，还可以设置定时器，在一定时间后，自动将开关变为 true，下面例子就是在 500 毫秒后，开关自动变为 true。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var isclick= true;function click(){ if(isclick){ isclick= false; //下面添加需要执行的事件 ... //定时器 setTimeout(function(){ isclick = true; }, 500); } |
二、jquery 实现 60 秒倒计时
方法一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var time = 60;//倒计时function getRandomCode() { if (time === 0) { time = 60; return; } else { time--; $('#time i').text(time); } setTimeout(function() { getRandomCode(); },1000); |
方法二：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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 传输参数（支持中文）
|
1
2
3
4
5
6
7
8
9
10
|
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 表单数据
|
1
2
3
4
5
6
7
8
9
10
11
|
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;} |
调用方法：
|
1
2
|
var userData. = getFromData();userData.表单name值 //获取值 |
五、设置，获取，清空 Cookie
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 设置cookiesfunction setCookie(name, value) { var exp = new Date(); exp.setTime(exp.getTime() + 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";}//读取cookiesfunction getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null;}// 清楚所有cookiesfunction 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
|
1
2
3
4
5
6
7
8
9
10
11
|
//时间戳转换方法 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 图片下载(兼容各浏览器)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 保存成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(); // 下载之后把创建的元素删除 } |
八、数字，金额格式互转正则表达式
|
1
|
<input type="text" placeholder="请输入" oninput = "checkInput(this)"> |
input 输入实时判断输入为金额格式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//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
|
1
2
3
4
5
6
7
8
|
function moneyToNumValue(val) { var num = val.trim(); var ss = num.toString(); if (ss.length == 0) { return "0"; } return ss.replace(/,/g, "");} |
九、canvas 图片背景设置为白色或透明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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); |
十、常用的正则表达式
|
1
2
3
4
5
6
7
8
9
10
11
|
//手机号正则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 获取完整当前域名
|
1
2
3
4
5
6
7
|
window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.netwindow.location.host; //返回url 的主机部分，例如：mp.csdn.netwindow.location.hostname; //返回mp.csdn.netwindow.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)window.location.pathname; //返回/a/index.php或者/index.phpwindow.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。window.location.port //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符 |
十二、base64 图片压缩
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//压缩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); //必须通过回调函数返回，否则无法及时拿到该值 }} |
以上就是工作中常用js的汇总的详细内容，更多关于常用js的汇总的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.im/post/6891809816503648263?utm_source=tuicool&utm_medium=referral
