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


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 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
js实现扫雷源代码
Nov 27 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
星际RPG字典
2020/03/04 星际争霸
PHP 函数执行效率的小比较
2010/10/17 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php中常用的预定义变量小结
2012/05/09 PHP
php设置编码格式的方法
2013/03/05 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python之列表推导式的用法
2019/11/29 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
大专生简历的自我评价
2013/11/26 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python