用html编写2、要求在页面中放一个文本框和一个“发送”按钮,文本框用于输入手机号码,输入完成后,单击“发送”按钮,该按钮在60秒以内不能再次被单击,防止重复发送短信。并且,在单击“发送”按钮之后,该按钮中的文字会变为“还剩下60秒”,并且“60”会每秒减1。当60秒过去后,按钮恢复为初始状态。
时间: 2023-11-24 17:05:12 浏览: 144
设计一个Windows窗体应用程序,通过在文本框中输入年后,单击【提交】按钮显示该年是否为闰年。
5星 · 资源好评率100%
以下是一个简单的示例代码,实现了你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>发送短信</title>
<script type="text/javascript">
var countdown; // 定义全局变量,用于定时器
function sendSMS() {
var btn = document.getElementById("sendBtn");
var input = document.getElementById("phoneNum");
var phoneNum = input.value;
if (!phoneNum) {
alert("请输入手机号码!");
return;
}
btn.disabled = true; // 禁用按钮
countdown = 60; // 定时器初始值
btn.innerHTML = "还剩下" + countdown + "秒";
var timer = setInterval(function() {
countdown--;
if (countdown == 0) {
clearInterval(timer);
btn.innerHTML = "发送";
btn.disabled = false; // 恢复按钮
} else {
btn.innerHTML = "还剩下" + countdown + "秒";
}
}, 1000);
}
</script>
</head>
<body>
<label>手机号码:</label>
<input type="text" id="phoneNum">
<button id="sendBtn" onclick="sendSMS()">发送</button>
</body>
</html>
```
上面的代码中,在单击“发送”按钮后,会通过 `setInterval` 函数开启一个定时器,每隔1秒更新按钮的文字和状态,直到60秒过去后再将按钮恢复为初始状态。
阅读全文