页面按钮禁用与解除禁用的方法
发布时间：2024-04-10 10:42:58
标签：禁用按钮,解除禁用
计时器和延时器的概念
//--计时器
// 计时器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
投稿猜你喜欢
- 相信大家平时都有这样的经历：页面上有一个链接指向服务器一个Word文件，当客户端机器有安装Office时，点击链接将调用Word打开浏览；当
- 本文实例讲述了python使用arp欺骗伪造网关的方法。分享给大家供大家参考。具体实现方法如下：#coding:utf-8''
- 本文介绍了6个asp常用的判断函数的语法和使用方法，有IsArray 函数，IsDate 函数 ，IsEmpty 函数，IsNull 函数，
- Whoosh 是纯Python实现的全文搜索引擎，通过Whoosh可以很方便的给文档加上全文索引功能。什么是全文检索简单讲分为两块，一块是分
ES6 开始，js 新增了剩余参数语法、展开语法等，它们有个共同之处就是都以 ... 这么个符号为前缀，好像很多地方都可以用到，但实际上又不- 网上关于Python的音视频播放示例都集中在简单的多媒体库或者PyGame这样的游戏库，有些库使用简单，但功能单一，有些库功能丰富，支持的格
- Python 列表（list）:1.序列介绍： 序列是Python中最基本的数据结构。序列中的每个元素都分配一个数字 - 它的位置，或索引
- 基本功能：能够实现学生成绩相关信息的输入、输出、查找、删除、修改等功能；（使用数据库对数据进行存取）输入并存储学生的信息：通过输入学生的学号
- find()方法判断字符串str，如果起始索引beg和结束end索引能找到在字符串或字符串的一个子串中。语法以下是find()方
- 本文介绍了Python对于线程的支持，包括“学会”多线程编程需要掌握的基础以及Python两个线程标准库的完整介绍及使用示例。注意：本文基于
- 说在前头最近在做毕设,题目是道路拥堵预测系统，学长建议我使用SVM算法进行预测，但是在此之前需要把Excel中的数据进行二次处理，原始数据不
- 1.按姓氏笔画排序:Select * From TableName Order By CustomerName Collate Chines
- Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4
- GO的条件变量一、条件变量与互斥锁条件变量是基于互斥锁的，它必须基于互斥锁才能发挥作用；条件变量并不是用来保护临界区和共享资源的，它是用来协
- 本文实例讲述了JS截取与分割字符串的常用方法。分享给大家供大家参考，具体如下：JS截取字符串可使用 substring()或者slice()
- Python中会遇到很多关于排序的问题，今天小编就带给大家实现插入排序的方法。在Python中插入排序的基本原理类似于摸牌，将摸起来的牌插入
- 1、Golang指针在介绍Golang指针隐式间接引用前，先简单说下Go 语言的指针 (Pointer)，一个指针可以指向任何一个值的内存地
- 本文实例讲述了Python实现按特定格式对文件进行读写的方法。分享给大家供大家参考，具体如下：#! /usr/bin/env python#
- 1、不指定开始和结束的索引[:]，这样得到的切片就可以包含整个列表，然后给切片一个新的变量，从而实现复制列表。2、创建原始列表的副本，两个列
- 基础这个模块是socket的异步实现，让我们先来熟悉一下模块中的一些类和方法：1.asyncore.loop输入一个轮询循环直到通过计数或打
