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


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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
传智播客学习之java 反射
Nov 22 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
javascript代码加载优化方法
Jan 30 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 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
phpfans留言版用到的install.php
2007/01/04 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python 变量的创建过程详解
2019/09/02 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python操作toml文件的示例代码
2020/11/27 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
简述数据库的设计过程
2015/06/22 面试题
运动会领导邀请函
2014/02/05 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
2014年司法局工作总结
2014/12/11 职场文书
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers