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 Array(数组)相关方法简述
Jul 25 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
如何让vue长列表快速加载
Mar 29 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
珊瑚虫IP库浅析
2007/02/15 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
写jQuery插件时的注意点
2017/02/20 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
技术股份合作协议书
2014/10/05 职场文书
写给医生的感谢信
2015/01/22 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Redis基本数据类型List常用操作命令
2022/06/01 Redis