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实现网站首页图片滚动显示
Feb 04 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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的优缺点
2015/07/14 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
js定时器实例分享
2016/12/20 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
使用python实现接口的方法
2017/07/07 Python
python实现报表自动化详解
2017/11/16 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python实现视频压缩功能
2020/12/18 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
2019年.net常见面试问题
2012/02/12 面试题
聚美优品励志广告词
2014/03/14 职场文书
大学生评语大全
2014/04/18 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
三八妇女节标语
2014/10/09 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server