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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
原生JS实现不断变化的标签
May 22 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
video.js添加自定义组件的方法
Dec 09 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
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
JavaScript 乱码问题
2009/08/06 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python代码太长换行的实现
2019/07/05 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
通过实例了解python property属性
2019/11/01 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python urllib2运行过程原理解析
2020/06/04 Python
python怎么判断素数
2020/07/01 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
自荐信需注意事项
2014/01/25 职场文书
销售顾问岗位职责
2014/02/25 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
教育教学工作反思
2016/02/24 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android