生成一个css+js+html的验证码页面
时间: 2023-08-14 07:06:01 浏览: 52
好的,以下是一个简单的验证码页面的示例代码:
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',需要在后端编写一个生成验证码图片的脚本。