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


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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP7变量处理机制修改
2021/03/09 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Vue实现简易购物车页面
2020/12/30 Vue.js
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python中最大递归深度值的探讨
2019/03/05 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
性能测试工程师的面试题
2015/02/20 面试题
客户接待方案
2014/02/26 职场文书
庆六一活动总结
2014/08/29 职场文书
酒店员工手册范本
2015/05/14 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL