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


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事件串连执行多个处理过程的方法
Mar 09 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
深入解析ES6中的promise
Nov 08 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
JS实现拼图游戏
Jan 29 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
layui表格内容溢出的解决方法
2019/09/06 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python简单实例训练(21~30)
2017/11/15 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
实例讲解python中的协程
2018/10/08 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
机器人总动员观后感
2015/06/09 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS