工作中常用js功能汇总

2023-07-12 15:26:03 198

一、javascript中防止重复点击、防止点击过快

防止重复点击可以添加一个开关,让这个开关默认为true，第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true，为true执行,false不执行。例子如下：

varisclick=true;
functionclick(){
if(isclick){
isclick=false;
//下面添加需要执行的事件
...
}

如果只是防止点击过快，还可以设置定时器，在一定时间后，自动将开关变为true，下面例子就是在500毫秒后，开关自动变为true。

varisclick=true;
functionclick(){
if(isclick){
isclick=false;
//下面添加需要执行的事件
...

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

二、jquery实现60秒倒计时

方法一：

vartime=60;
//倒计时
functiongetRandomCode(){
if(time===0){
time=60;
return;
}else{
time--;
$('#timei').text(time);
}
setTimeout(function(){
getRandomCode();
},1000);

方法二：

vartimeClock;
functionsendCode(){
vartimer_num=60;
timeClock=setInterval(function(){
timer_num--;
$('.clock').html(timer_num);

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

三、获取URL传输参数（支持中文）

functiongetQueryString(name){
varreg=newRegExp('(^|&)'+name+'=([^&]*)(&|$)','i');
varr=window.location.search.substr(1).match(reg);
if(r!=null){
returndecodeURI(r[2]);
}
returnnull;
}
//调用方法
GetQueryString("参数名")

四、Jq获取from表单数据

functiongetFromData(id){
if(id==undefined){
id="form"
}
vardata={};
vart=$(id).serializeArray();
$.each(t,function(){
data[name=this.name]=this.value;
});
returndata;
}

调用方法：

varuserData.=getFromData();
userData.表单name值//获取值

五、设置，获取，清空Cookie

//设置cookies

functionsetCookie(name,value){
varexp=newDate();
exp.setTime(exp.getTime()+60*60*1000);
document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString()+";path=/";
}

//读取cookies
functiongetCookie(name){
vararr,reg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");

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

returnunescape(arr[2]);
else
returnnull;
}

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

六、js转换时间戳-转换成yyyy-MM-ddHH:mm:ss

//时间戳转换方法date:时间戳数字
functionformatDate(date){
vardate=newDate(date);
varYY=date.getFullYear()+'-';
varMM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'-';
varDD=(date.getDate()<10?'0'+(date.getDate()):date.getDate());
varhh=(date.getHours()<10?'0'+date.getHours():date.getHours())+':';
varmm=(date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes())+':';
varss=(date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds());
returnYY+MM+DD+""+hh+mm+ss;
}

七、canvas图片下载(兼容各浏览器)

//保存成png格式的图片
document.getElementById("save").onclick=function(){
varcanvas=document.getElementById("canvas");
if(window.navigator.msSaveOrOpenBlob){//ie浏览器
varimgData=canvas.msToBlob();
varblobObj=newBlob([imgData]);
window.navigator.msSaveOrOpenBlob(blobObj,"专家认证二维码.png");
}else{//谷歌火狐浏览器
downLoad(canvas.toDataURL("image/png"));
}
}

//下载图片
functiondownLoad(url){
varoA=document.createElement("a");
oA.download='专家认证二维码';//设置下载的文件名，默认是'下载'
oA.href=url;
oA.className="qrcode"
document.body.appendChild(oA);
oA.click();
oA.remove();//下载之后把创建的元素删除
}

八、数字，金额格式互转正则表达式

input输入实时判断输入为金额格式

functioncheckInput(obj){
vart=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是小数点位数
functionfmoney(s,n){
n=n>0&&n<=20?n:2;
s=parseFloat((s+"").replace(/[^\d\.-]/g,"")).toFixed(n)+"";
varl=s.split(".")[0].split("").reverse(),
r=s.split(".")[1];
t="";
for(i=0;i
金额格式转数字例：将1,234,567.00转换为1234567.00
functionmoneyToNumValue(val){
varnum=val.trim();
varss=num.toString();
if(ss.length==0){
return"0";
}
returnss.replace(/,/g,"");
}

九、canvas图片背景设置为白色或透明
varcanvas=document.getElementById("canvas");
varimageData=canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height);
for(vari=0;i
十、常用的正则表达式
//手机号正则
varreg=/^1[0-9]{10}$/;

//身份证号（18位）正则
varcP=/^[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]$/;

//邮箱正则
varreg=/^([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方法
functiondealImage(base64,w,callback){
varnewImage=newImage();
varquality=0.6;//压缩系数0-1之间
newImage.src=base64;
newImage.setAttribute("crossOrigin",'Anonymous');//url为外域时需要
varimgWidth,imgHeight;
newImage.onload=function(){
imgWidth=this.width;
imgHeight=this.height;
varcanvas=document.createElement("canvas");
varctx=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);
varbase64=canvas.toDataURL("image/jpeg",quality);//压缩语句
callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
}
}


以上就是工作中常用js的汇总的详细内容，更多关于常用js的汇总的资料请关注毛票票其它相关文章！

工作中常用js功能汇总

热门推荐

随机推荐