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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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制作新闻系统的思路
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
常用简易JavaScript函数
2009/04/09 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
小学教师自我鉴定
2013/11/07 职场文书
三年级科学教学反思
2014/01/29 职场文书
简历的自我评价范文
2014/02/04 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
代办出身证明书
2014/10/21 职场文书
出纳岗位职责
2015/01/31 职场文书
护士实习自荐信
2015/03/06 职场文书
教师聘用意向书
2015/05/11 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python