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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS的get和set使用示例
Feb 20 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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/02 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python切片操作实例分析
2018/03/16 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python如何批量生成和调用变量
2020/11/21 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
教师个人自我评价范文
2014/04/13 职场文书
安全责任书模板
2014/07/22 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS