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


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文件的小脚本
Jun 28 Javascript
JS 控制CSS样式表
Aug 20 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
jquery 笔记 事件
Nov 02 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
jsonp跨域请求详解
Jul 13 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
微信小程序实现日历小功能
Nov 18 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 读取文件乱码问题
2010/02/20 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP常用的三种设计模式
2017/02/17 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js闭包实例汇总
2014/11/09 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
vant实现购物车功能
2020/06/29 Javascript
介绍Python中的fabs()方法的使用
2015/05/14 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python 如何创建一个线程池
2020/07/28 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
中学门卫岗位职责
2013/12/26 职场文书
暑期实践思想汇报
2014/01/06 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python