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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
Js基础学习资料
Nov 23 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP number_format() 函数定义和用法
2012/06/01 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Python中文编码知识点
2019/02/18 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
详解Python中的文件操作
2021/01/14 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
大学迎新生标语
2014/10/06 职场文书
学生检讨书范文
2015/01/27 职场文书
春节随笔
2015/08/15 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript