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


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动态设置样式实现代码(2)
Jan 25 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
node实现的爬虫功能示例
May 04 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
文章推荐系统(三)
2006/10/09 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
励志演讲稿300字
2014/08/21 职场文书
七一建党节演讲稿
2014/09/11 职场文书
授权委托书
2014/09/17 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
道歉信怎么写
2015/05/12 职场文书
战马观后感
2015/06/08 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python基础详解之邮件处理
2021/04/28 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP