JS简单实现随机颜色验证码功能

一、实现效果：

二、思路：

1、采用数组存放26位大小写字母以及数字

如果你感觉麻烦，可以采用ACCII码表来循环生成数字与字母结合的随机数

 const CodeArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'u', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']

2、随机数取整

利用取整函数（随机函数*数组长度）来生成数组的下标，

Math.floor(Math.random() * CodeArr.length)

3、随机颜色

1、使用随机函数*256生成对应的RGB

 let r = parseInt(Math.random() * 256);let g = parseInt(Math.random() * 256);let b = parseInt(Math.random() * 256);let rgb = "rgb(" + r + "," + g + "," + b + ")";

2、要使每一个字母或者数字有不一样的颜色，需要循环为每个字母或者数字加上color值，如果你验证码是一个字符串的话，循环改变 Str[i].style.color = randomColor() 可能会报错，字符串是没有style属性的，只有对象才有，这里我将验证码分开生成<span>的对象，通过querySelectorAll("span")来获取每一个对象的属性，并且修改其color值。

<div class="Code" title="看不清，换一张"><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

4、提交判断

1、这里我们忽略大小写验证，判断之前全部转换成小写，或者大写。这里还可以采用正则表达式的方式来进行判断。
2、判断后清空输入框value，验证失败，刷新验证码信息。

//封装验证函数function checkCode() {let str1 = "";for (let i = 0; i < Code.length; i++) {str1 += Code[i].innerHTML}//转换成小写let str = str1.toLowerCase();let CodeVue = CodeBoxvue.value.toLowerCase();//进行判断if (CodeVue === str) {alert("验证通过!!!");CodeBoxvue.value = "";} else {alert("验证失败!!!");CodeBoxvue.value = "";AutoCode();}}

附录

HTML:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Verification Code</title><link rel="stylesheet" href="./code.css"><script src="./code.js"></script>
</head><body><div class="VerCode"><input type="text" placeholder="验证码" class="CodeBox"><div class="Code" title="看不清，换一张"><span></span><span></span><span></span><span></span><span></span><span></span></div><input type="submit" value="提交" class="submitBtn"></div></body></html>

CSS：

* {margin: 0 auto;padding: 0 auto;
}ul li {text-decoration: none;float: left;
}.VerCode {position: relative;left: 43%;top: 400px;
}.VerCode .CodeBox {width: 200px;height: 30px;outline: none;font-size: 16px;
}.Code {position: absolute;left: 210px;top: 2px;height: 34px;width: 120px;text-align: center;line-height: 30px;font-size: 22px;font-family: 微软雅黑;cursor: pointer;font-weight: 600;
}.VerCode .submitBtn {position: absolute;left: 70px;top: 60px;width: 60px;height: 30px;cursor: pointer;
}.Code span {margin: 0 -3px;
}

JavaScript:

//生成随机验证码
window.onload = function() {//获取页面元素let Code = document.querySelector('.Code').querySelectorAll('span');let Codes = document.querySelector('.Code');let submitBtn = document.querySelector('.submitBtn');let CodeBoxvue = document.querySelector('.CodeBox');//  取消页面文字选中document.addEventListener('selectstart', function(e) {e.preventDefault(); //阻止默认行为})//页面加载完先生成一个验证码AutoCode();//点击后自动刷新验证码Codes.addEventListener('click', AutoCode);//点击提交按钮，判断输入框与验证码是否匹配submitBtn.addEventListener('click', checkCode)//封装验证函数function checkCode() {let str1 = "";for (let i = 0; i < Code.length; i++) {str1 += Code[i].innerHTML}//转换成小写let str = str1.toLowerCase();let CodeVue = CodeBoxvue.value.toLowerCase();//进行判断if (CodeVue === str) {alert("验证通过!!!");CodeBoxvue.value = "";} else {alert("验证失败!!!");CodeBoxvue.value = "";AutoCode();}}//封装一个形成验证码函数function AutoCode() {for (let i = 0; i < 6; i++) {Code[i].innerHTML = GetCode();Code[i].style.color = randomColor();}}//随机生成验证码function GetCode() {const CodeArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'u', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']let VerCode = ""for (let i = 0; i < 6; i++) {let num = Math.floor(Math.random() * CodeArr.length);VerCode = CodeArr[num];}return VerCode;}//随机生成颜色function randomColor() {let r = parseInt(Math.random() * 256);let g = parseInt(Math.random() * 256);let b = parseInt(Math.random() * 256);let rgb = "rgb(" + r + "," + g + "," + b + ")";return rgb;}
}

JS简单实现随机颜色验证码功能相关推荐

html验证码功能如何实现原理,基于JS实现一个随机生成验证码功能
效果展示实现原理 1. html:一般就是一个div: 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验 ...
js简单实现一个json格式化功能
js简单实现一个json格式化功能背景 html 核心代码背景在最近的一个项目中,有个需求是实现json编辑和提交.在我的实现中,使用了在textarea编辑,然后在无序列表中显示json格式化 ...
html给手机号发送验证码,js如何实现手机发送验证码功能
js如何实现手机发送验证码功能发布时间:2021-06-21 12:24:46 来源:亿速云阅读:82 作者:小新这篇文章将为大家详细讲解有关js如何实现手机发送验证码功能,小编觉得挺实用的,因 ...
用js方法实现随机颜色tag标签
用js方法实现随机颜色tag标签效果如下
JavaScript函数封装随机颜色验证码
数字或者字母或者数字字母混合的n位验证码带随机的颜色.下面是完整的代码,需要的自取哈! function verify(a = 6,b = "num"){//定义三个随机验证码 ...
html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
php 验证码生成,PHP实现随机生成验证码功能
验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.当然 ...
4.花瓣特效----js+旋转+位移+随机颜色+随机位置
在3.花瓣特效----js+旋转+位移的基础上再增加位置和颜色的变化. 1.思路: 利用Math.random来产生(0,16)的随机数,然后创建从1到F的数组New_color,New_color[ ...
js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
实现的原理: 根据上面的图可以算出移动后的盒子的left和top: 鼠标距离边界的值: ev.pageY - box.top ev.pageX - box.left box2.top = ev2.pa ...