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


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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
layui清除radio的选中状态实例
Nov 14 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与XML的PDF文档生成技术
2006/10/09 PHP
php中apc缓存使用示例
2013/12/25 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
javascript如何创建对象
2016/08/29 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
浅谈python中的占位符
2017/11/09 Python
python递归实现快速排序
2018/08/18 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
基于Pytorch SSD模型分析
2020/02/18 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
人事行政经理岗位职责
2014/06/18 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
话题作文之生命的旋律
2019/12/17 职场文书