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


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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
基于复选框demo(分享)
Sep 27 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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函数和特点
2013/08/08 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
JavaScript模拟push
2016/03/06 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
产品促销活动策划书
2014/01/15 职场文书
签约仪式主持词
2014/03/19 职场文书
调研汇报材料范文
2014/08/17 职场文书
活动主持人开场白
2015/05/28 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Python 数据可视化之Bokeh详解
2021/11/02 Python