js实现随机8位验证码

时间：2021-08-22 来源：互联网编辑：宝哥软件园浏览：次

发展思路：

1.画出放置验证码的模块，上面写着“看不见……”的小块，输入验证码的文本框。2.获取每个模块。3.封装一个函数Yan_ma()，验证码设置为8位，包含数字、小写字母、小写字母和中文。每种类型的概率是25%。4.随机数介于0和9之间。向下舍入数学. ramand()。5.随机大小写字母使用fromCharCode()方法：将Unicode编码转换为一个字符，例如：

var n=String . FromCharCode(65)；cosole . log(n)；//j的输出结果是大写字母(65-91)和小写字母(97-123)

var s=string . fromcharcode(math . floor(math . random()* 26 65))；var s=string . fromcharcode(math . floor(math . random()* 26 97))；6.随机中文，声明变量字母放置中文字符串，使用charAt()随机获取字母中的一个中文字符。

Var letter='如果可以的话，亲爱的，请允许我在绿光和墨水下写一个简单的音符，今生为你唱一千遍'；var s=letter . charat(math . floor(math . random()* letter . length))；7.为每个验证码设置随机颜色、字体大小、相对文本位置和旋转角度。封装颜色函数，并使用十六进制颜色(例如：#ffffff)

//随机颜色函数font color(){ var S1=' '；for(var k=0；K6；k ){ var z=[0，1，2，3，4，5，6，7，8，9，' a '，' b '，' c '，' d '，' e '，' f ']；var m=z[math . floor(math . random()* z . length)]；S1=m；}返回“#”S1；}随机位置和随机旋转角度相同

随机位置可以上下左右移动8px，随机旋转角度可以围绕z轴旋转(45度)。

8.提前声明一个空字符串，这样每个验证码都可以用一个字符串连接起来。

var s=string . fromcharcode(math . floor(math . random()* 26 97))；str=' span style=' transform : rotatez(' zhuan ' deg)；left: ' topset ' pxcolor: ' colorfont-size : ' size ' px；top : ' topset ' px ' s '/span '；arr=s；9.让8位验证码出现在第一个大模块的innerHTML中。

10.将点击事件添加到带有“难以辨认”的span标签中。点击时，调用函数Yan_ma刷新验证码。

11.如果输入的验证码不正确，则弹出“验证成功”，否则弹出“验证失败”。

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题随机验证码/title脚本var arr=窗口。onload=function(){ var MAA=document。getelementsbyclassname(' block ')[0]；var looking=文档。getelementbyid(' look ')；var put=文档。getelementbyid(' text ')；var btnn=文档。getelementbyid(' BTN ')；延马(MAA)；看着。onclick=function(){ Yan _ ma(MAA)；};btnn。onclick=function(){ if(put。价值。tolowercase()==arr。tolowercase()){ alert('验证成功');} else{ alert('验证失败');延马(MAA)；} } };函数Yan _ ma(aim){ arr=' '；var str=for(var I=0；i8；i ) { //随机数数学。随机0-1的随机值var n=数学。random()；//随机颜色var color=字体颜色()；//随机大小var size=数学。地板(数学。随机()* 12 ^ 20)；//随机位置var g=Math.random() 0.5？-1: 1;var topset=数学。random()* g * 8；//随机旋转var h=Math.random() 0.5？-1: 1;var zhuan=数学。random()* h * 45；if (n 0.25) { //随机数字var s=数学。地板(数学。random()* 10)；str=' span style=' transform : rotatez(' zhuan ' deg)；left : ' topset ' pxcolor : ' color font-size : ' size ' px；top : ' topset ' px '/span '；arr=s；} //随机大写字母//65-91 else if(n=0.25n 0.5){ var s=string。fromcharcode(数学。地板(数学。random()* 26 65))；str=' span style=' transform : rotatez(' zhuan ' deg)；left : ' topset ' pxcolor : ' color font-size : ' size ' px；top : ' topset ' px '/span '；arr=s；} //随机小写字母97-123 else if(n=0.5n 0.75){ var s=string。fromcharcode(数学。地板(数学。random()* 26 97))；str=' span style=' transform : rotatez(' zhuan ' deg)；left : ' topset ' pxcolor : ' color font-size : ' size ' px；top : ' topset ' px '/span '；arr=s；} //随机文字else { var字母='如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念；var s=字母。charat(数学。地板(数学。random()*字母。长度))；str=' span style=' transform : rotatez(' zhuan ' deg)；left : ' topset ' pxcolor : ' color font-size : ' size ' px；top : ' topset ' px '/span '；arr=s；} } aim . innerhtml=str } function font color(){ var S1=' '；for(var k=0；K6；k ){ var z=[0，1，2，3，4，5，6，7，8，9，' a '，' b '，' c '，' d '，' e '，' f ']；var m=z[数学。地板(数学。随机()* z .长度)]；S1=m；}返回“#”S1；}/脚本样式。块{宽度：250像素高度：60 px背景：url('bg2.png ')无重复中心；背景尺寸： 100%;文本对齐：中心；线高： 60px} .块跨度{位置：相对；显示器：内联块；宽度：20 pxmargin :5 px 3px } # look { color : # 9200 ff } # look : hover { cursor :指针；}/style/head dydiv class=' block '/div span id=' look '看不清./span br/输入类型='text' id='text '占位符='请输入验证码/button id='btn '验证/按钮/正文/html出现的验证码