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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
Javascript Math对象
Aug 13 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
Element Alert警告的具体使用方法
Jul 27 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP实现验证码校验功能
2017/11/16 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
详解python3中的真值测试
2018/08/13 Python
python实现飞机大战
2018/09/11 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python处理“
2019/06/10 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
如何选择使用结构还是类
2014/05/30 面试题
总经理助理工作职责
2014/02/06 职场文书
校外活动方案
2014/08/28 职场文书
领导班子整改方案
2014/10/25 职场文书
实施意见格式范本
2015/06/05 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书