js实现验证码功能
程序员文章站
2024-01-17 14:08:22
#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮 然后加亿些样式input { width: 150px; height: 30px; outline: n...
#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面
首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮
<body>
<input type="text">
<div></div>
<button>提交</button>
</body>
然后加亿些样式
input {
width: 150px;
height: 30px;
outline: none;
font-size: 24px;
vertical-align: middle;
}
button {
outline: none;
vertical-align: middle;
cursor: pointer;
}
div {
display: inline-block;
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: middle;
background-color: #ddd;
cursor: pointer;
}
然后大概长这样（有点丑，不过无所谓，主要内容是js）
好，那么开始写js
首先获取这些元素
var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
然后搞一个字符库和一个保存验证码的字符串
var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;
那个字符库就直接滚键盘就行了~
因为验证码要多次用到随机数，所以为了方便就先搞一个随机数的函数
function getRandom(l, r) {
return parseInt(l + Math.random() * (r - l + 1));
}
因为是验证码，所以不能让生成的文本可以直接被选中复制，所以给加一个文本不可选中
div.addEventListener('selectstart', function (e) {
e.preventDefault();
})
因为验证码不是每次刷新页面就生成一次，看不清是可以换的，要多次生成，所以就把生成验证码的部分写在一个函数里
function run() {
str = '';
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
for (var i = 0; i < 4; i++) {
var span = document.createElement('span');
span.innerHTML = characters[getRandom(0, characters.length - 1)];
span.style.display = 'inline-block';
span.style.fontSize = getRandom(16, 32) + 'px';
span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
str += span.innerHTML;
div.appendChild(span);
}
}
大概说明一下这部分，原理大概就是创建4（我搞的是4位的验证码）个span，然后分别随机设置文本、字体大小、字体颜色、平移旋转啥的，然后把span添加到div里成为div的子节点，然后不要忘了让str变量储存一下验证码的字符
每次生成之前先将上一次生成的验证码删掉（即把div里的所有子节点删除掉），并且把str重置
然后页面刷新的时候生成一次（调用一次），每次点击div的时候重新生成一次（每次点击调用一次）
run();
div.addEventListener('click', run);
再给提交按钮添加点击事件：判断验证输入的验证码对不对，然后刷新验证码，并且自动将输入框中的文本清除
btn.addEventListener('click', function () {
if (input.value.toLowerCase() == str.toLowerCase()) {
alert('验证成功');
} else {
alert('验证失败');
}
run();
input.value = '';
})
判断验证码这里我为了不区分大小写用了toLowerCase()函数将两个字符串都转化成小写之后再做的比较
至此，功能就都实现的差不多了
看效果：
带注释的完整版代码如下：
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js实现验证码</title>
<style>
input {
width: 150px;
height: 30px;
outline: none;
font-size: 24px;
vertical-align: middle;
}
button {
outline: none;
vertical-align: middle;
cursor: pointer;
}
div {
display: inline-block;
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: middle;
background-color: #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text">
<div></div>
<button>提交</button>
<script>
// 获取元素
var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 搞一个字符库
var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str; // str用来储存验证码的文本
// 生成一个在[l,r]范围内的随机整数的函数
function getRandom(l, r) {
return parseInt(l + Math.random() * (r - l + 1));
}
// 设置文本不可选中
div.addEventListener('selectstart', function (e) {
e.preventDefault();
})
// 生成验证码的函数
function run() {
// 先重置str
str = '';
// 删除掉div中的所有子节点
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
// 生成由四个字符组成的验证码
for (var i = 0; i < 4; i++) {
// 创建一个span对象
var span = document.createElement('span');
// 设置文本（从字库中随机抽取一个字符）
span.innerHTML = characters[getRandom(0, characters.length - 1)];
// 设置一些随机的样式
span.style.display = 'inline-block';
span.style.fontSize = getRandom(16, 32) + 'px';
span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
str += span.innerHTML; // str记录字符
div.appendChild(span); // 将span添加到div中
}
}
run(); // 每次打开/刷新页面时先调用一次
div.addEventListener('click', run); // 每次点击验证码的时候调用一次
// 提交按钮点击事件
btn.addEventListener('click', function () {
if (input.value.toLowerCase() == str.toLowerCase()) {
alert('验证成功');
} else {
alert('验证失败');
}
run();
input.value = '';
})
</script>
</body>
</html>
以上
ヾ(≧∪≦*)ノ〃
本文地址：https://blog.csdn.net/ycx60rzvvbj/article/details/107441800