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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
js下弹出窗口的变通
2007/04/18 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
为什么要使用Vuex的介绍
2019/01/19 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
中班幼儿评语大全
2014/04/30 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
学习党章心得体会2016
2016/01/15 职场文书
高中英语教学反思范文
2016/03/02 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Python学习开发之图形用户界面详解
2021/08/23 Python
python三子棋游戏
2022/05/04 Python