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鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
vue实现循环滚动列表
Jun 30 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
详解阿里Node.js技术文档之process模块学习指南
Jan 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日历程序
2006/12/06 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php上传excel表格并获取数据
2017/04/27 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python队列的定义与使用方法示例
2017/06/24 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
小学生暑假家长评语
2014/04/17 职场文书
师德师风自我评价范文
2014/09/11 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
党员个人整改措施
2014/10/24 职场文书
新生儿未入户证明
2015/06/23 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
Vue.Draggable实现交换位置
2022/04/07 Vue.js