javascript设置连续两次点击按钮时间间隔的方法


Posted in Javascript onOctober 28, 2014

本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考。具体实现方法如下:

很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才能够再次点击按钮,下面就通过代码实例介绍一下如何实现此功能,代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 #Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 #Javascript
JS对象与json字符串格式转换实例
Oct 28 #Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 #Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 #Javascript
JavaScript极简入门教程(三):数组
Oct 25 #Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 #Javascript
You might like
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python txt文件如何转换成字典
2020/11/03 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
思想汇报格式
2014/01/05 职场文书
高二政治教学反思
2014/02/01 职场文书
大型会议接待方案
2014/03/01 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
公务员政审材料范文
2014/12/23 职场文书
初中语文教师研修日志
2015/11/13 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python