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

计时器和延时器的概念
//--计时器
// 计时器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>

赞 (0)

相关推荐

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

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

    计时器和延时器的概念 //--计时器 // 计时器ID号 setInterval(回调函数, 毫秒数); // 每隔指定毫秒数,调用一次回调函数 // clearInterval(计时器ID号) // 停止指定ID号的计时器(实际上是销毁释放资源了) //--延时器 // 延时器Id号 setTimeout(回调函数, 毫秒间隔) // 从调用开始,等待指定毫秒数后调用一次回调函数,结束 // 使用clearTimeout清除延时器 效果图: 页面打开后会出现下图:之后按钮value值每过1秒

  • ASP.NET页面按钮单击事件失效的解决方法

    今天,再次运行以前的项目时,发现按钮的单击事件不起作用了,加了断点之后发现根本没有触发该事件.... 按照网上找到的答案,有的说把控件删掉重新拖拽一个进去,虽然以前也遇到过控件失效,重新拖拽有效的时候,但这次没有起作用. 而后,继续寻找答案,有的说可能是form嵌套,可是查看源代码没有这个问题. 无意中,尝试在按钮中加了一个客户端单击事件: 复制代码 代码如下: OnClientClick="return true" 竟然有效了: 复制代码 代码如下: <asp:ImageBut

  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    本文实例讲述了JS禁用页面上所有控件的实现方法.分享给大家供大家参考,具体如下: 利用页面元素的特征,可以捕捉到所有元素. function DisableElements(container,blnHidenButton) { if (!container) return; var aEle; if (navigator.appName =="Microsoft Internet Explorer") //IE { for (var i=0;i<container.all.le

  • php禁用cookie后session设置方法分析

    本文实例讲述了php禁用cookie后session设置方法.分享给大家供大家参考,具体如下: 我们都知道当在session 会话有基于cookie和基于url两种传递SESSIONID的方法.为了实现客户端禁止cookie发送的情况也不影响客户登陆网站,可以设置 php.ini中 session.use_trans_sid=1 ,表示当客户端浏览器禁止cookie的时候,页面上的链接会基于url传递SESSIONID.但是很多人仅仅设置了这一个选项并没有达到效果,本人也 遇到此问题,后来一番研

  • php禁用函数设置及查看方法详解

    本文实例讲述了php禁用函数设置及查看方法.分享给大家供大家参考,具体如下: 打开PHP.INI,找到这行: disable_functions = 在后面那里加上要禁用的函数,如禁用多个函数,要用半角逗号 , 分开 给个例子: 复制代码 代码如下: disable_functions = passthru,exec,system,popen,chroot,scandir,chgrp,chown,escapesh ellcmd,escapeshellarg,shell_exec,proc_ope

  • redis开启和禁用登陆密码校验的方法

    1. 开启登陆密码校验 在redis-cli命令行工具中执行如下命令: config set requirepass yourpassword 2. 禁用登陆密码校验 同上,需要在redis-cli中执行如下命令: config set requirepass "" 以上这篇redis开启和禁用登陆密码校验的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例

    PyQt5切换按钮控件QPushButton简介 QAbstractButton类为抽象类,不能实例化,必须由其他的按钮类继承QAbstractButton类,来实现不同的功能和表现形式,常见的按钮QPushButton,QToolButton,QRadioButton和QCheckBox这些按钮均继承自QAbstractButton类,根据各自的使用场景通过图形显示出来 QAbstractButton提供的状态如下表 状态 含义 isDown() 提示按钮是否已按下 isChecked() 提

  • JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码

    先来两个简单粗暴的 第一种方法: var arr = [123, 17, 18]; document.oncontextmenu = new Function("event.returnValue=false;"),//禁用右键 document.onselectstart = new Function("event.returnValue=false;"),//禁用选中 window.onkeydown = function (e) { var code = e.

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • JS实现刷新父页面不弹出提示框的方法

    本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

随机推荐