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函数
Aug 01 Javascript
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
canvas的神奇用法
Feb 03 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
详解vue axios二次封装
Jul 22 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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浮点数精确运算
2016/03/10 PHP
拖动一个HTML元素
2006/12/22 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Pandas的数据过滤实现
2021/01/15 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
聚美优品广告词改编
2014/03/14 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
员工表扬信怎么写
2015/05/05 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python