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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
深入理解(function(){... })();
Aug 16 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
浅谈Vue.js
Mar 02 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
微信小程序实现拍照和相册选取图片
May 09 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python如何更新包
2020/06/11 Python
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
教师自荐信范文
2013/12/09 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
会计的岗位职责
2014/03/15 职场文书
运动会口号8字
2014/06/07 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
授权委托书协议书
2014/10/16 职场文书
门面租赁合同范文
2019/08/06 职场文书
导游词之日本富士山
2020/01/06 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Vue如何清空对象
2022/03/03 Vue.js
深入理解pytorch库的dockerfile
2022/06/10 Python