本文实例为大家分享了js实现验证码功能的具体代码，供大家参考，具体内容如下

#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码和效果在后面

首先在页面中准备一个输入框，一个显示验证码的盒子和一个提交按钮

提交

然后加一些样式

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()函数将两个字符串都转化成小写之后再做的比较

至此，功能就都实现的差不多了

看效果：

带注释的完整版代码如下：

js实现验证码

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;

}

提交

// 获取元素

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 = '';

})

以上

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。