从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍了js如何实现随机8位验证码,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联是一家专注于网站设计制作、成都网站建设与策划设计,临漳网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:临漳等地区。临漳做网站价格咨询:028-86922220开发思路:
1.画出放置验证码的模块、一个写有“看不清…”的小块,以及输入验证码的文本框
2.获取各个模块
3.封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文。每种类型出现的可能性为25%。
4.随机数字在0-9,之间。对Math.ramand()向下取整。
5.随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如:
var n = String.fromCharCode(65); cosole.log(n); //输出j结果为A
大写字母(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.随机中文,声明变量letter放置中文字符串,使用charAt()随机在letter中获得某个汉字。
var letter = "如若可以亲爱的请许我青灯墨下执一笔素笺今生为你吟尽千回百转念"; var s = letter.charAt(Math.floor(Math.random() * letter.length));
7.给每位验证码设随机的颜色,字体大小,相对文本位置,旋转角度。给颜色封装一个函数,使用十六进制颜色(如:#ffffff)
//随机颜色 function fontcolor(){ var s1=""; for(var k=0;k<6;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; } return "#"+s1; }
随机位置和随机旋转角度的方法相同
随机位置可能为向上下左右偏移 8px, 随机旋转角度可能为绕着z轴旋转(±45度)。
8.提前声明一个空字符串 str 让每位验证码用字符串连接起来.
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+=""+s+"";
arr+=s;
9.让8位验证码出现在第一个大模块中的innerHTML中。
10.给写有“看不清”的span标签添加点击事件,点击时,调用函数Yan_ma,刷新验证码。
11.如果输入的验证码不正确,则弹出“验证成功”,否则弹出“验证失败”。
随机验证码 看不清...
出现的验证码
当输入正确验证码时
当没输入错误验证码时
感谢你能够认真阅读完这篇文章,希望小编分享的“js如何实现随机8位验证码”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图