制作一个简单的短信发送HTML点击后出现倒计时,在倒计时内无法再次点击
时间: 2024-04-05 12:32:19 浏览: 9
好的,请看下面的代码,这是一个简单的短信发送HTML页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>短信发送</title>
<script>
function countdown() {
var button = document.getElementById("send");
var count = 60;
button.innerHTML = "重新发送(" + count + ")";
button.disabled = true;
var timer = setInterval(function() {
count--;
button.innerHTML = "重新发送(" + count + ")";
if (count == 0) {
clearInterval(timer);
button.innerHTML = "发送验证码";
button.disabled = false;
}
}, 1000);
}
</script>
</head>
<body>
<h1>短信发送</h1>
<form action="submit.php" method="post">
<label for="phone">手机号码:</label>
<input type="text" id="phone" name="phone" required>
<br>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" required>
<br>
<button type="button" id="send" onclick="countdown()">发送验证码</button>
<button type="submit">提交</button>
</form>
</body>
</html>
```
在这个页面中,用户需要输入手机号码和验证码,然后点击“发送验证码”按钮。一旦用户点击该按钮,它将被禁用,并且倒计时会在按钮上开始显示。在60秒倒计时过程中,用户无法再次点击该按钮。一旦倒计时结束,按钮将重新启用,并显示“发送验证码”文本。您可以根据您的需求进行适当修改。