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 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序数据存储与取值详解
Jan 30 Javascript
React如何创建组件
Jun 27 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Express + Session 实现登录验证功能
2017/09/08 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python入门篇之字符串
2014/10/17 Python
开源Web应用框架Django图文教程
2017/03/09 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
Java的五个基础面试题
2016/02/26 面试题
精彩自我鉴定
2014/01/16 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
连带责任保证书
2014/04/29 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
Mysql事务索引知识汇总
2022/03/17 MySQL
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python