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针对DOM的应用分析(二)
Apr 15 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
玩转图像函数库―常见图形操作
2006/09/03 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python清空文件并替换内容的实例
2018/10/22 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python