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

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

身份认证购VIP最低享 7 折!

30元优惠券

该资源是一个简单的网页代码片段，用于实现点击按钮后的禁用与计时重置功能。当用户点击“免费获取验证码”或类似功能的按钮后，按钮会变灰并进入不可点击状态，然后在指定秒数（这里是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页未读，立即下载