javascript设置连续两次点击按钮时间间隔的方法
本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考。具体实现方法如下:
很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才能够再次点击按钮,下面就通过代码实例介绍一下如何实现此功能,代码如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="author"content="https://www.nhooo.com/"/> <title>毛票票</title> <scripttype="text/javascript"> window.onload=function(){ varodiv=document.getElementById("thediv"); varobt=document.getElementById("bt"); varcount=0; varflag=null; functiondone(){ if(count==0){ clearInterval(flag); } else{ count=count-1; } } obt.onclick=function(){ varval=parseInt(odiv.innerHTML); if(count==0){ odiv.innerHTML=val+1; count=20; flag=setInterval(done,1000); } else{ alert("还需要"+(count)+"秒才能点击"); } } } </script> </head> <body> <divid="thediv">0</div> <inputtype="button"id="bt"value="查看效果"/> </body> </html>
以上代码实现了我们的要求,可以限制点击按钮的间隔时间,这一效果可以扩展到其他的功能中,比如限制发帖的间隔时间等等,下面就介绍一下它的实现过程。
代码注释如下:
1.window.onload=function(){},规定文档内容完全加载完毕再去执行函数中的代码。
2.varodiv=document.getElementById("thediv"),获取div元素对象。
3.varobt=document.getElementById("bt"),获取按钮对象。
4.varcount=0,声明一个变量并赋初值为0,它用来存储间隔时间。
5.varflag=null,声明一个变量并赋初值为null,此变量用来存储定时器函数的返回值。
6.functiondone(){},此函数可以被定时器函数不断的调用,来对count进行递减。
7.if(count==0){clearInterval(flag);},如果count==0,则停止定时器函数的执行。
8.else{count=count-1;},如果不等于0,则进行减一操作。
9.obt.onclick=function(){},为按钮注册点击事件处理函数。
10.varval=parseInt(odiv.innerHTML),获取div中的内容,并转换为整数。
11.if(count==0){
odiv.innerHTML=val+1;
count=20;
flag=setInterval(done,1000);
}
如果count等于0话饿,那么就将div中的内容+1,并且将count设置为20,同时开机定时器函数的执行。
12.else{alert("还需要"+(count)+"秒才能点击");},如果count不等于零,那么弹出还差多长时间可以点击。
希望本文所述对大家的javascript程序设计有所帮助。