javascript实现十秒钟后注册按钮可点击的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现十秒钟后注册按钮可点击的方法。分享给大家供大家参考。具体分析如下:

1.注册按钮初始状态为不可用,disabled
2.启动定时器,setInterval,1秒钟运行一次CountDown方法,设定一个初始值为10的全局变量,
 在CountDown方法中对全局变量倒数,然后将倒数的值写到注册按钮上(请仔细阅读协议(还剩8秒))。
3.直到全局变量的值<=0,就让注册按钮可用,将按钮的文本设置为"同意!"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 var MyCount = 10;
 var intervalID;
 function CountDown() {
  var btnReg = document.getElementById("btnReg");
  if (btnReg) {
  //此处要加上btnReg是否为空的判断,
  //因为有可能网速很慢,setInterval后,btnReg按钮还没加载
  if (MyCount <= 0) {
   btnReg.disabled = ""; //或者btnReg.disabled="disabled"也可以
   btnReg.value = "同意";
   clearInterval(intervalID); //清除定时器
  }
  else {
   btnReg.value = "请仔细阅读协议(还剩" + MyCount + "秒)";
   MyCount--;
  }
  }
 }
 intervalID=setInterval("CountDown()", 1000);
 </script>
</head>
<body>
 <textarea>请同意本站的协议</textarea><br />
 <input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
JS实现模拟风力的雪花飘落效果
May 13 #Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 #Javascript
浅谈javascript中的闭包
May 13 #Javascript
You might like
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python解析html开发库pyquery使用方法
2014/02/07 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
开业庆典邀请函
2014/01/08 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
学术会议主持词
2014/03/17 职场文书
教师三严三实心得体会
2014/10/11 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
SQL Server表分区删除详情
2021/10/16 SQL Server
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Python加密技术之RSA加密解密的实现
2022/04/08 Python