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


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 20 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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获取服务器时间的实现代码
2013/06/07 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python技能之数据导出excel的实例代码
2017/08/11 Python
Python读取word文本操作详解
2018/01/22 Python
Python中optparser库用法实例详解
2018/01/26 Python
python之消除前缀重命名的方法
2018/10/21 Python
python烟花效果的代码实例
2020/02/25 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
应届生求职推荐信
2013/10/28 职场文书
金融专业应届生求职信
2013/11/02 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
社区清明节活动总结
2014/07/04 职场文书
违纪检讨书
2015/01/27 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
德劲DE1108畅想
2021/04/22 无线电
Java 关于String字符串原理上的问题
2022/04/07 Java/Android