前端写个验证码,验证码需要在验证码框内
时间: 2024-04-29 19:24:10 浏览: 4
显示一张随机生成的图片,图片上包含一些随机的数字或字母,用户需要输入验证码框内的数字或字母来验证身份。
以下是一个简单的前端验证码实现:
HTML代码:
```
<div class="captcha">
<img src="" alt="captcha image">
<input type="text" placeholder="请输入验证码">
<button>刷新</button>
</div>
```
CSS代码:
```
.captcha {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
margin: 20px 0;
}
.captcha img {
margin-right: 10px;
}
.captcha input {
width: 120px;
padding: 5px;
margin-right: 10px;
}
.captcha button {
background-color: #eee;
border: none;
padding: 5px 10px;
cursor: pointer;
}
```
JavaScript代码:
```
// 生成随机验证码
function generateCaptcha() {
var captcha = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 6; i++) {
captcha += possible.charAt(Math.floor(Math.random() * possible.length));
}
return captcha;
}
// 更新验证码图片和输入框
function updateCaptcha() {
var captchaImg = document.querySelector(".captcha img");
var captchaInput = document.querySelector(".captcha input");
var captcha = generateCaptcha();
captchaImg.src = "http://placehold.it/120x40?text=" + captcha;
captchaInput.value = "";
}
// 刷新验证码
var refreshButton = document.querySelector(".captcha button");
refreshButton.addEventListener("click", updateCaptcha);
// 初始化验证码
updateCaptcha();
```
在这个例子中,我们使用了一个 `generateCaptcha` 函数来生成一个6位随机验证码。我们使用了 `placehold.it` 来生成一个随机图片,图片上显示了我们生成的验证码。我们还添加了一个“刷新”按钮,当用户点击该按钮时,我们会更新验证码图片和输入框。最后,我们在页面加载时初始化了该验证码。