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 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
input的focus方法使用
Mar 13 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python感知机实现代码
2019/01/18 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
tensorboard显示空白的解决
2020/02/15 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
竞争性谈判邀请书
2014/02/06 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
经营管理策划方案
2014/05/22 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
幼师小班个人总结
2015/02/12 职场文书
大学生暑假实习总结
2015/07/13 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Nginx反向代理配置的全过程记录
2021/06/22 Servers