好的，以下是一个
简单的
验证码页面的示例代码：
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>
验证码</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>
验证码</h1>
<form>
<div class="form-group">
<label for="inputCode">请输入
验证码：</label>
<input type="text" class="form-control" id="inputCode" placeholder="
验证码">
</div>
<div class="form-group">
<img id="codeImg" class="code-img" src="">
<button type="button" class="btn btn-primary" id="refreshBtn">刷新</button>
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
</body>
</html>
```
CSS:
```css
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
h1 {
margin-top: 50px;
margin-bottom: 30px;
}
.form-group {
display:
flex;
align-items: center;
margin-bottom: 20px;
}
.form-control {
flex: 1;
margin-right: 10px;
}
.code-img {
width: 120px;
height: 40px;
margin-right: 10px;
}
.btn-primary {
margin-left: auto;
}
.btn-success {
margin-top: 20px;
}
```
JavaScript:
```javascript
// 随机
生成验证码
function generateCode() {
var code = '';
var codeLength = 4;
var codeChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < codeLength; i++) {
var randomIndex = Math.floor(Math.random() * codeChars.length);
code += codeChars.charAt(randomIndex);
}
return code;
}
// 更新
验证码图片
function updateCodeImg() {
var code = generateCode();
var codeImg = document.getElementById('codeImg');
codeImg.src = 'code.php?code=' + code;
return code;
}
// 刷新
验证码
function refreshCode() {
var code = updateCodeImg();
var inputCode = document.getElementById('inputCode');
inputCode.value = '';
inputCode.focus();
}
// 初始加载
验证码
refreshCode();
// 点击刷新按钮
var refreshBtn = document.getElementById('refreshBtn');
refreshBtn.addEventListener('click', function() {
refreshCode();
});
// 提交表单时
验证验证码
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
var inputCode = document.getElementById('inputCode');
var code = inputCode.value;
if (code !== updateCodeImg()) {
event.preventDefault();
alert('
验证码错误，请重新输入！');
refreshCode();
}
});
```
以上代码包含了一个随机
生成验证码、更新
验证码图片、刷新
验证码、
验证验证码的功能，并且使用了Bootstrap的样式。需要注意的是，以上代码
中的
验证码图片地址为'code.php'，需要在后端编写一个
生成验证码图片的脚本。
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
