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动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
用console.table()调试javascript
Sep 04 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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
paypal即时到账php实现代码
2010/11/28 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
详解PHP归并排序的实现
2016/10/18 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
英国名牌男装店:Standout
2021/02/17 全球购物
投资合作协议书
2014/04/17 职场文书
2014年班主任工作总结
2014/11/08 职场文书
索赔员岗位职责
2015/02/15 职场文书
文言文辞职信
2015/02/28 职场文书
仓库管理制度范本
2015/08/04 职场文书
医院消毒隔离制度
2015/08/05 职场文书
《观察物体》教学反思
2016/02/17 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers