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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Three.js基础学习教程
2017/11/16 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
师德师风主题教育活动总结
2015/05/07 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python