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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
简单实现JS计算器功能
Dec 21 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
js实现可爱的气泡特效
Sep 05 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中使用Oracle数据库(3)
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
大学毕业生简单自荐信
2013/11/05 职场文书
年度考核自我鉴定
2013/11/09 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
孙振耀退休感言
2015/08/01 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL