用css和javascript写一个验证码
时间: 2023-07-14 16:13:25 浏览: 56
好的,以下是一个基本的验证码实现,使用了HTML、CSS和JavaScript:
HTML部分:
```html
<div id="captcha">
<canvas id="canvas"></canvas>
<input type="text" id="captchaInput" placeholder="输入验证码">
<button id="refreshBtn">刷新</button>
<button id="submitBtn">提交</button>
</div>
```
CSS部分:
```css
#captcha {
display: flex;
flex-direction: column;
align-items: center;
}
canvas {
border: 1px solid #ccc;
}
input, button {
margin-top: 10px;
padding: 5px;
font-size: 16px;
}
button {
cursor: pointer;
}
```
JavaScript部分:
```javascript
// 获取canvas元素
const canvas = document.getElementById('canvas');
// 获取刷新按钮元素
const refreshBtn = document.getElementById('refreshBtn');
// 获取提交按钮元素
const submitBtn = document.getElementById('submitBtn');
// 获取输入框元素
const captchaInput = document.getElementById('captchaInput');
// 获取2D上下文
const ctx = canvas.getContext('2d');
// 定义验证码字符集
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
// 定义随机数函数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成随机验证码
function generateCaptcha() {
// 生成随机的四个字符
let captcha = '';
for (let i = 0; i < 4; i++) {
captcha += charset[random(0, charset.length - 1)];
}
// 绘制验证码到canvas上
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = 'bold 30px sans-serif';
ctx.fillText(captcha, 10, 35);
// 返回验证码字符串
return captcha;
}
// 初始化页面
function init() {
// 设置canvas宽高
canvas.width = 200;
canvas.height = 50;
// 生成初始验证码
const captcha = generateCaptcha();
// 点击刷新按钮生成新的验证码
refreshBtn.addEventListener('click', function() {
const captcha = generateCaptcha();
});
// 点击提交按钮检查验证码是否正确
submitBtn.addEventListener('click', function() {
if (captchaInput.value.toLowerCase() === captcha.toLowerCase()) {
alert('验证码正确');
} else {
alert('验证码错误');
}
});
}
init();
```
以上代码实现了一个基本的验证码功能,当点击刷新按钮时会生成新的验证码,当点击提交按钮时会检查输入框中的值是否与当前验证码相同。注意,这只是一个非常简单的实现,实际中还需要考虑更多的安全和易用性问题。