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


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 写类方式之七
Jul 05 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
前端jquery部分很精彩
May 03 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
vue下的@change事件的实现
Oct 25 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 header示例代码(推荐)
2010/09/08 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
酒店开业策划方案
2014/06/02 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
mysql优化
2021/04/06 MySQL
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python