一、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
|
// 设置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
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.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 图片压缩
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