6.用html编写程序,在页面上生成指定位数的随机验证码
时间: 2024-02-25 18:59:20 浏览: 81
好的,以下是一个用 HTML 和 JavaScript 生成指定位数随机验证码的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机验证码</title>
</head>
<body>
<h1>随机验证码</h1>
<p>请在下面的文本框中输入下图中显示的验证码:</p>
<img id="captchaImg">
<input type="text" id="captchaInput">
<button onclick="checkCaptcha()">提交</button>
<p id="message"></p>
<script>
function generateCaptcha(length) {
var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var captcha = "";
for (var i = 0; i < length; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
return captcha;
}
function showCaptcha() {
var captchaImg = document.getElementById("captchaImg");
var captchaInput = document.getElementById("captchaInput");
var captcha = generateCaptcha(6); // 生成 6 位验证码
captchaImg.src = "http://placehold.it/120x40?text=" + captcha; // 在这里用占位图代替真正的验证码图片
captchaInput.value = "";
}
function checkCaptcha() {
var captchaInput = document.getElementById("captchaInput");
var message = document.getElementById("message");
if (captchaInput.value === captchaImg.alt) {
message.textContent = "验证码正确!";
} else {
message.textContent = "验证码错误,请重试。";
showCaptcha();
}
}
var captchaImg = document.getElementById("captchaImg");
captchaImg.alt = generateCaptcha(6); // 生成 6 位验证码并保存在 alt 属性中
showCaptcha(); // 页面加载完成时显示验证码
</script>
</body>
</html>
```
这个程序会在页面上显示一个 6 位随机验证码,并在用户输入验证码后判断输入是否正确。当用户点击“提交”按钮后,会调用 checkCaptcha() 函数,该函数会获取用户输入的验证码并与页面上显示的验证码进行比较,如果相同则显示提示信息“验证码正确!”;如果不同则显示提示信息“验证码错误,请重试。”并重新生成一个新的验证码。
为了生成随机验证码,我们编写了一个 generateCaptcha() 函数,它接受一个参数 length,表示生成验证码的位数。在函数中,我们定义了一个包含数字和字母的字符串 chars,然后利用 Math.random() 和字符串的 charAt() 方法随机生成一个 length 位的验证码。
在页面加载完成后,我们会先生成一个验证码并将它保存在 img 标签的 alt 属性中,然后调用 showCaptcha() 函数将验证码显示在页面上。这里我们用了一个占位图代替真正的验证码图片,因为我们并没有实际的验证码图片资源。
阅读全文