使用js制作一个验证码功能

CQXXTXX

于 2022-11-13 20:47:31 发布

阅读量899

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/CQXXTXX/article/details/127837138

版权

本文介绍了一个简单的HTML和JavaScript实现的验证码功能。通过生成随机字符串并绘制在canvas上，结合线条和小点增加干扰，实现了验证码的生成。同时，代码中包含点击刷新验证码和验证输入是否正确的功能。

摘要由CSDN通过智能技术生成

验证码功能也是在各大app及网页中都能遇到的小功能，非常实用也非常有趣，写出来以后也是很好理解，下面就是一个特别基础的验证码功能实例。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
text-align: center;
width: 200px;
height: 200px;
}
#myCanvas{
border: 1px solid #ccc;
}
.Canvas{
text-align: center;
}
.btn{
margin-top: 10px;
width: 80px;
height: 30px;
border: 0;
border-radius: 5px;
background: rgb(84,58,183);
color: #fff;
}
#val{
margin: 10px 0;
}
</style> -->
</head>
<body>

<div class="wrap">
<div class="Canvas">
<canvas id="myCanvas" width="122" height="40"></canvas>
</div>

<input type="text" id="val">
<button class="btn">验证</button>
</div>

<script type="text/javascript">
// 获取随机字符串函数
function randomString(len) {
//如果没有传递参数  默认是 5
len = len || 5;
//从这里随机 抽取
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabacdefg1234567890";
//获取字符串长度
let maxPos = chars.length;
//存储生成汉的验证码字符串
let val = '';
//循环
for (let i = 0; i < len; i++) {
// charsAt 返回字符串中的  某个位置 的字符  传递的参数是 字符串的 位置 数字
// Math.random()获取一个 0~1 的数字 包括小数
val += chars.charAt(Math.random() * maxPos);
}
return val;
}
// console.log(randomString());
//获取随机颜色函数
function randomColor() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);

return "rgb(" + r + ", " + b + "," + r + ")";
}
// console.log(randomColor());
//获取 canvas 元素
const c = document.querySelector('#myCanvas');
//获取随机字符
let letifcation = randomString();
//canvas 验证 填充函数
function cav() {
//随机验证码字符串
letifcation = randomString();
//获取canvas 的宽度
const cxtwith = c.offsetWidth;
//获取canvas 的高度
const cxtheight = c.offsetHeight;
//创建画布
const ctx = c.getContext('2d');
//重置画布
ctx.clearRect(0, 0, cxtwith, cxtheight);
//字体颜色;
ctx.fillStyle = '#FF0000';
//字体的大小 和 字体类型
ctx.font = '35px Arial';
//填充
ctx.fillText(letifcation, 10, 25);
//验证码上显示的线条
for (let i = 0; i <= 5; i++) {
ctx.strokeStyle = randomColor()
//起始点
ctx.beginPath();
//移动到指定位置 不创建 路径
ctx.moveTo(Math.random() * cxtwith, Math.random() * cxtheight);
//创建一个新的起点
ctx.lineTo(Math.random() * cxtwith, Math.random() * cxtheight);
//填充
ctx.stroke();
}
//验证码上显示的小点
for (let i = 0; i <= 30; i++) {
ctx.strokeStyle = randomColor();
//起始点
ctx.beginPath();
let x = Math.random() * cxtwith;
let y = Math.random() * cxtheight;
//移动
ctx.moveTo(x, y);
//创建一个新的点
ctx.lineTo(x + 1, y + 1);
//填充
ctx.stroke();
}
}
cav();
//点击 验证码 容器触发
c.addEventListener('click', () => {
// 重新调用
cav();
})
//获取按钮
let btn = document.querySelector('.btn');
//获取文本框
let val = document.querySelector('#val');
//点击按钮 触发
btn.addEventListener('click', () => {
if (val.value != letifcation) {
alert('验证码不正确！');
return
}
alert('验证码正确！');
})
</script>
</body>
</html>