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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
用C++封装MySQL的API的教程
2015/05/06 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python关键字and和or用法实例
2015/05/28 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python实现简单http服务器
2018/04/12 Python
详解如何设置Python环境变量?
2019/05/13 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python中列表的含义及用法
2020/05/26 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
学生出入校管理制度
2014/01/16 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
永远是春天观后感
2015/06/12 职场文书
单位收入证明范本
2015/06/18 职场文书
python在package下继续嵌套一个package
2022/04/14 Python