介绍的JavaScript
& lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt;/head>
& lt; style>
.code {
字体类型:Arial;
字体样式:斜体;
颜色:蓝色;
字体大小:26 px;
边界:0;
填充:0.2 px 1.2 px;
字母间距:4 px;
粗细:大胆的;
浮:左;
光标:指针;
宽度:120 px;
高度:40像素;
行高:40像素;
text-align:中心;
vertical-align:中间;
background - color: # d8b7e3;
}
跨度{
文字修饰:没有;
字体大小:12 px;
颜色:# 288 bc4;
padding-left: 10 px;/*颜色:# 4 c9b7675;*/}
跨度:{徘徊
文字修饰:下划线;
光标:指针;/*颜色:rgb (rgb(221、84、84),绿色,蓝色);*//*颜色:rgb (rgb(160、207、209),绿色,蓝色);*/}
& lt;/style>
& lt; body>
& lt; div>
& lt;表边界=?”;单元格间距=?”;单元格边距=?“比;
& lt; tr>
& lt; td>
& lt; div id=癱heckCode"类=癱ode">窗口。onload=function () {
createCode (4);
}//创建验证码
函数createCode (len) {//var代码=& # 39;& # 39;;
var codeLength=方法(len);//验证码的长度
var checkCode=. getelementbyid (& # 39; checkCode& # 39;);//获取画布//设置验证码
var codeArray=new Array (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, & # 39; z # 39;, & # 39; x # 39;, & # 39; c # 39;, & # 39; v # 39;, & # 39; b # 39;, & # 39; n # 39;, & # 39;猴# 39;,& # 39;l # 39;, & # 39; k # 39;, & # 39;强生# 39;,& # 39;h # 39;, & # 39;舌鳎# 39;,& # 39;f # 39;, & # 39; d # 39;, & # 39; & # 39;, & # 39;一个# 39;,& # 39;p # 39;, & # 39; o # 39;, & # 39;我# 39;,& # 39;u # 39;, & # 39; y # 39;, & # 39; t # 39;, & # 39; " # 39;, & # 39; " # 39;, & # 39; e # 39;, & # 39; w # 39;, & # 39;提问# 39;,“Z", & # 39; x # 39;, & # 39; c # 39;,“V",“B",“N",“M",“A",“S",“D",“F",“G",“H",“J",“L",“K",“P",“O",“我,“U",“Y",“T",“R",“E",“W",“Q")//设置验证码颜色//var num=Math.floor (math . random () * 8)
var=& # 39;颜色# & # 39;;
var背景=& # 39;# & # 39;;
var fontcolor=new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, & # 39;一个# 39;,& # 39;b # 39;, & # 39; c # 39;, & # 39; d # 39;, & # 39; e # 39;, & # 39; f # 39;);//循环数组,随机获取
(var=0;我& lt;codeLength;我+ +){//获取数组下标
var charNum=Math.floor (math . random () * 62);//存储数组
代码=代码+ codeArray [charNum];
}
如果(checkCode,,代码。长度==codeLength) {
checkCode。innerHTML=代码;
}//设置验证码颜色
(var=0;我& lt;6;我+ +){
var colorNum=Math.floor (math . random () * 15);
颜色+=fontcolor [colorNum];
}
console.log(颜色)
checkCode.style。颜色=颜色;//设置画布背景颜色
(var=0;我& lt;6;我+ +){
var colorNum=Math.floor (math . random () * 15);
背景+=fontcolor [colorNum];
}
checkCode.style。写成backgroundColor=背景;
}//检验验证码是否正确
函数validateCode () {//获取画布的验证码
var checkCode=. getelementbyid (“checkCode") .innerHTML;//获取用户输入的验证码,并且去掉空格
var inputCode=. getelementbyid (& # 39; inputCode& # 39;) .value.trim ();
console.log (checkCode)
console.log (inputCode)//判断是否相等
如果(inputCode。长度& lt;4){
警报(& # 39;验证码长度为四位& # 39;);
createCode (4);
}else if (checkCode.toLocaleLowerCase () !=inputCode.toLocaleLowerCase ()) {
警报(& # 39;输入验证码不正确! & # 39;);
createCode (4);
其他}{
警报(& # 39;正确& # 39;)
}
}
小编给大家分享一下JavaScript如何实现验证码功能的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
JavaScript实现简单验证码,具体内容如下
验证流程图
HTML部分
以上是JavaScript如何实现验证码功能的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
