javascript设置连续两次点击按钮时间间隔的方法
本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法，分享给大家供大家参考。具体实现方法如下：
很多时候我们在实际应用中，可能并不希望按钮联系被不间断的点击，所以要限定一定的时间间隔才能够再次点击按钮，下面就通过代码实例介绍一下如何实现此功能，代码如下:
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("thediv");
var obt=document.getElementById("bt");
var count=0;
var flag=null;
function done(){
if(count==0){
clearInterval(flag);
}
else{
count=count-1;
}
}
obt.onclick=function(){
var val=parseInt(odiv.innerHTML);
if(count==0){
odiv.innerHTML=val+1;
count=20;
flag=setInterval(done,1000);
}
else{
alert("还需要"+(count)+"秒才能点击");
}
}
}
</script>
</head>
<body>
<div id="thediv">0</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
以上代码实现了我们的要求，可以限制点击按钮的间隔时间，这一效果可以扩展到其他的功能中，比如限制发帖的间隔时间等等，下面就介绍一下它的实现过程。
代码注释如下:
1.window.onload=function(){}，规定文档内容完全加载完毕再去执行函数中的代码。
2.var odiv=document.getElementById("thediv")，获取div元素对象。
3.var obt=document.getElementById("bt")，获取按钮对象。
4.var count=0，声明一个变量并赋初值为0，它用来存储间隔时间。
5.var flag=null，声明一个变量并赋初值为null，此变量用来存储定时器函数的返回值。
6.function done(){}，此函数可以被定时器函数不断的调用，来对count进行递减。
7.if(count==0){clearInterval(flag);}，如果count==0，则停止定时器函数的执行。
8.else{count=count-1;}，如果不等于0，则进行减一操作。
9.obt.onclick=function(){}，为按钮注册点击事件处理函数。
10.var val=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程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript获取网页表单提交方式的方法,可判断表单提交方式是get还是post,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）
PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）...2007-08-08
这篇文章主要介绍了JavaScript类继承及实例化的方法,较为详细的分析了javascript扩展类、实例化类及类对象与成员函数的使用技巧,需要的朋友可以参考下2015-07-07
本文给大家介绍js事件详解，涉及到事件流，事件处理，事件对象等方面的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
最近刚接触了uni-app,用于开发微信小程序,设计到了微信授权登录,下面这篇文章主要给大家介绍了关于uni-app中使用手机号一键登录的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
最近写一个关于用JavaScript做图片自动切换问题发现一个非常奇特的问题，除了空格和换行外完全相同的代码，在Firefox下却有截然不同的运行结果，今天记录以提供他人留意及自我备查。2010-11-11
curring的概念将函数式编程的概念和默认参数以及可变参数结合在一起.一个带n个参数,curried的函数固化第一个参数为固定参数,并返回另一个带n-1个参数的函数对象,分别类似于LISP的原始函数car和cdr的行为。currying能泛化为偏函数应用（partial function application, PFA）,p 这种函数将任意数量（顺序）的参数的函数转化为另一个带剩余参数的函数对象2012-02-02![JavaScript面向对象之体会[总结]](//img.jbzj.com/images/xgimg/bcimg7.png)
看过很多JavaScript书，对JavaScript的面向对象讲的都比较深入，但是并没有做到深入浅出，总结了我做的一些JavaScript程序的经验，以简洁明了的文字使大家明白JavaScript面向对象的实现。2008-11-11
这篇文章主要为大家介绍了JavaScript数学对象Math操作数字的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
下面小编就为大家带来一篇浅谈js中的变量名和函数名重名。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
![JavaScript面向对象之体会[总结]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论