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


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代码
Jan 01 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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设计模式 Strategy(策略模式)
2011/06/26 PHP
解析php取整的几种方式
2013/06/25 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
js选项卡的制作方法
2017/01/23 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
简单谈谈python中的多进程
2016/11/06 Python
单利模式及python实现方式详解
2018/03/20 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
群众路线剖析材料
2014/02/02 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
银行求职信范文
2014/05/26 职场文书
文艺演出策划方案
2014/06/07 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
旗帜观后感
2015/06/08 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL