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 相关文章推荐
html5+javascript制作简易画板附图
Apr 25 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
了解重排与重绘
May 29 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/11/25 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
vue-loader教程介绍
2017/06/14 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Python求解平方根的方法
2015/03/11 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Django中的Model操作表的实现
2018/07/24 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
中专自荐信
2013/10/13 职场文书
授权委托书格式
2014/07/31 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
高一军训感想
2015/08/07 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js