页面按钮禁用与解除禁用的方法


Posted in Javascript onFebruary 19, 2014

计时器和延时器的概念
//--计时器
// 计时器ID号 setInterval(回调函数, 毫秒数);
// 每隔指定毫秒数,调用一次回调函数

// clearInterval(计时器ID号)
// 停止指定ID号的计时器(实际上是销毁释放资源了)

//--延时器
// 延时器Id号 setTimeout(回调函数, 毫秒间隔)
// 从调用开始,等待指定毫秒数后调用一次回调函数,结束
// 使用clearTimeout清除延时器

效果图:

页面打开后会出现下图:之后按钮value值每过1秒 数字减小1直至0停止 按钮内容变为同意

页面按钮禁用与解除禁用的方法

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#btn 
{ 
width:200px; 
height:50px; 
background -color:gary; 
} 
</style> 
<script type="text/javascript"> 
onload = function () { 
//获得该button对象 
var btn = document.getElementById('btn'); 
//创建计时器 返回计时器ID 
var intervalId = setInterval(function () { 
var waitSecond = parseInt((/\d+/).exec(btn.value));//利用RegExp.exec()方法,返回匹配的字符串内容 
waitSecond--;//时间-- 
if (waitSecond >= 0) {//判断 
btn.value=btn.value.replace(/\d+/, waitSecond) //利用string.repleace(RegExp,code)方法替换按钮value中数字,并返回替换结果 
} else { 
btn.value = '同意';//将按钮value值改为同意 
btn.disabled = false;//将按钮disabled值改为false 
clearInterval(intervalId);//清除计时器 
} 
}, 1000); 
}; 
</script> 
</head> 
<body> 
<input type="button" name="name" value="请仔细阅读5秒后点击同意继续" id="btn" disabled="disabled"/> 
</body> 
</html>
Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 #Javascript
悬浮数字的实现案例
Feb 19 #Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 #Javascript
js实现身份证号码验证的简单实例
Feb 19 #Javascript
js实现表格字段排序
Feb 19 #Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 #Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php 生成文字png图片的代码
2011/04/17 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python字典底层实现原理详解
2019/12/18 Python
通过python检测字符串的字母
2020/02/18 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
工程造价专业求职信
2014/07/17 职场文书
村班子对照检查材料
2014/08/18 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2015年环保局工作总结
2015/05/22 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
python基础之函数的定义和调用
2021/10/24 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js