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 相关文章推荐
flash遮住div问题的正确解决方法
Feb 27 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jQuery 位置插件
2008/12/25 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
小英雄雨来观后感
2015/06/09 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python