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


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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
原生JS实现$.param() 函数的方法
Aug 10 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
layui表格数据重载
Jul 27 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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
加强版phplib的DB类
2008/03/31 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
全国文明单位申报材料
2014/05/31 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python入门之基础语法详解
2021/05/11 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript