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 相关文章推荐
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
详解javascript void(0)
Jul 13 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
jQuery 操作XML入门
2008/12/25 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
js实现图片实时时钟
2020/01/15 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
详解在Python程序中使用Cookie的教程
2015/04/30 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python pillow模块使用方法详解
2019/08/30 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
公司离职证明范本
2014/01/13 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
高中军训感言600字
2014/03/11 职场文书
新闻稿怎么写
2015/07/18 职场文书
《给予树》教学反思
2016/03/03 职场文书