JavaScript实现按钮点击后禁用与倒计时重置

4星 · 超过85%的资源需积分: 29 24 浏览量更新于2024-09-12 1 收藏 872B TXT 举报

该资源是一个简单的网页代码片段，用于实现点击按钮后的禁用与计时重置功能。当用户点击“免费获取验证码”或类似功能的按钮后，按钮会变灰并进入不可点击状态，然后在指定秒数（这里是5秒）后恢复可点击。在给定的代码中，主要涉及以下知识点： 1. **JavaScript 基础**：这段代码使用了 JavaScript 来处理按钮的点击事件和计时逻辑。JavaScript 是一种客户端脚本语言，常用于增强网页的交互性。 2. **DOM 操作**：`val.removeAttribute("disabled")` 和 `val.setAttribute("disabled", true)` 分别用于移除和添加按钮的 disabled 属性，从而控制按钮的启用和禁用状态。 3. **事件处理函数**：`onclick="settime(this)"` 这一行代码绑定了一个点击事件处理器 `settime` 函数，并将当前点击的元素（按钮）作为参数传入。在事件触发时，这个函数会被执行。 4. **计时器（setTimeout）**：`setTimeout(function(){ settime(val) }, 1000)` 是用来每秒调用一次 `settime` 函数的。它会在1000毫秒（即1秒）后执行提供的回调函数，这样可以实现倒计时效果。 5. **变量管理**：`var countdown=5;` 和 `var count=0;` 分别定义了计时的总秒数和当前的秒数。在每次函数调用时，`countdown` 会递减，直到等于0，然后恢复按钮的初始状态。 6. **HTML 结构**：代码包含了一个基本的 HTML 页面结构，包括 `<html>`、`<head>`、`<title>`、`<body>` 等元素。在 `<head>` 标签中，通常会引入外部样式表、脚本文件等，但这里没有，而是直接在 `<body>` 中编写了内联 JavaScript 代码。 7. **JSP（JavaServer Pages）**：虽然代码中没有直接展示 JSP 的动态特性，但从文件引用如 `<%@page language="java" ... %>` 可以看出，这是一段嵌入在 JSP 页面中的静态 HTML 部分。JSP 用于在服务器端生成 HTML 并返回给客户端。 8. **页面编码**：`pageEncoding="utf-8"` 指定了页面的字符编码为 UTF-8，确保中文字符能正确显示。 9. **标签库引用**：`<%@include file="/jsp/common/taglibs.jsp"%>` 和 `<%@include file="/jsp/common/manage_head.jsp"%>` 表示在页面加载时会插入这两个引用的文件内容，可能包含了共用的标签库定义和页面头部信息。总结来说，这段代码提供了一种简单的前端按钮点击后禁用并倒计时恢复的方法，适用于防止短时间内重复提交表单或其他请求。在实际应用中，这样的功能可以结合后端逻辑一起使用，以确保服务的稳定性和用户体验。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/jsp/common/taglibs.jsp"%>
<%@include file="/jsp/common/manage_head.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>My JSP 'ok.jsp' starting page</title>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<div id="cs"></div>
<script type="text/javascript">
var countdown = 5;
var count = 0;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value = "免费获取验证码";
countdown = 5;
return
} else {
val.setAttribute("disabled", true);
val.value = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val)
}, 1000)
}

下载后可阅读完整内容，剩余1页未读，立即下载

沸腾得小丸子

粉丝: 3
资源: 9

JavaScript实现按钮点击后禁用与倒计时重置

点击按钮后5s内不能再次点击该按钮

STC12C5A60S2单片机串口实验程序

stc12c5s60s2程序 亲自编写

单片机STC12C5A60S2简介[定义].pdf

STC12C5a60s2d内部的AD，串口发送

STC12C5A60S2---AD.zip_AD串口发送_STC12C5A60S2 串口_STC12C5A60S2-AD_stc

vue中手机号,邮箱正则验证以及60s发送验证码的实例

基于STC12C5A60S2和GSMTC35I的发送与接收信息程序

VHDL 60S计时

使用js需求：按钮60s后才可以使用 分析: 1.开始先把按钮禁用(disabled属性) 2.一定要获取元素 3.函数内处理逻辑 秒数开始递减 按钮里面的文字跟着一起变化 如果秒数等于0停止定时器 里面的文字变为同意 最后按钮可以被点击

最新资源

stc12c5s60s2程序亲自编写

使用js需求：按钮60s后才可以使用分析: 1.开始先把按钮禁用(disabled属性) 2.一定要获取元素 3.函数内处理逻辑秒数开始递减按钮里面的文字跟着一起变化如果秒数等于0停止定时器里面的文字变为同意最后按钮可以被点击