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 相关文章推荐
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
Angular2入门--架构总览
Mar 29 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
深入理解node.js http模块
Jan 24 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
vue单元格多列合并的实现
Nov 26 Vue.js
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
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
用ADODB.Stream转换
2007/01/22 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python如何建立全零数组
2020/07/19 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
小学运动会表扬稿
2014/01/19 职场文书
绩效管理实施方案
2014/03/19 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
教师党员自我评价范文
2015/03/04 职场文书
公司人力资源管理制度
2015/08/05 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python