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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jQuery 表格工具集
Apr 25 Javascript
JS的get和set使用示例
Feb 20 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
node.js博客项目开发手记
Mar 16 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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/10/09 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
详解webpack自定义loader初探
2018/08/29 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
运动会解说词50字
2014/01/18 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
会计学自荐信
2014/06/03 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
趣味运动会广播稿
2015/08/19 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
学习党史心得体会2016
2016/01/23 职场文书
68句权威创业名言
2019/08/26 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python