JS攻略第五关:验证码

一般来讲,验证码在开发项目中都是后台处理的,用来避免机器对服务器进行大量重复的操作,导致服务器瘫痪。

在前端制作验证码基本没有实用意义,仅仅是为了学习验证码的生成逻辑。

这里要实现的是四位验证码,包含数字和26个大小写字母,每次刷新页面或点击都会随机改变验证码内容。

如下图:

首先按F5刷新页面,验证码随机改变;随后鼠标点击验证码,同样发生改变。

确定目标后,我们来编写代码。

一、获取包裹验证码的div元素:

图1

二、框定验证码的取值范围。根据要求,验证码中需包含:数字0~9、小写字母a~z以及大写字母A~Z,把这些字符串赋值给变量strRange。

图2

三、定义一个值为空的变量result,用来保存随后生成的验证码;

图3

四、随机生成四位验证码;

验证码由四个字符组成,所以需要四次循环,依次生成每一位字符。然而在生成字符的过程中,我们该如何随机生成字符呢?

这里提供一个思路:我们都知道,要想获取字符串中的某一位字符,只要得知该字符所对应的索引即可。例如,想要获得strRange变量中的“q”,而“q”对应的索引为10,那么通过strRange[10]即可得到“q”。

所以,只要随机得到四个数字,把该数字当作索引配合变量strRange使用,就能得到四位验证码了。

图4

其中,获取随机整数的完整公式是Math.round(Math.random(n-m)+n)。在公式中,m为最小值,n为最大值,该公式的完整含义是:生成m~n之间(包含m、n)的随机整数。

根据我们之前定下的取值范围,字符串中共有62位数字和字母,对应的索引为0~61,代入到公式,得到图4的代码。

到这里,我们已厘清验证码的逻辑,但是我不想让验证码中出现重复的数字或字母。

实现这一点,首先要验证新获取的字符在变量result中存在与否,如存在,不存储,重新进行循环获取字符;如不存在,再累加至result中去。

图5

如果当判断结果为true时,不进行任何操作,直接进入下次循环,将会导致的后果是:如果新生成的字符与result中的字符重复,那么当前循环将不会生成任何新字符,这次循环会被浪费掉。循环四次的目的就是为了生成四个字符,循环被浪费一次,就会少得到一位字符。

解决方法很简单,如果字符重复,再次进行此次循环即可,这正是“i--”的意义所在。

我对这个结果还是不满意,目前已经解决了重复的问题,而如果把同一个字母的大小写也算重复,该如何解决呢?

不妨在比较时,把result中的字符与新生成的字符全部转换成大写字符或小写字母,再进行比较。

图6

五、把生成的四位验证码,插入到div元素中去。

图7

至此,随机生成四位验证码的效果已经实现。我们把代码封装进函数中,绑定点击事件后,即可实现效果图中的效果。

图8

完整代码(百度网盘)

https://pan.baidu.com/s/1miHzoyW

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180104G0F4XC00?refer=cp_1026

扫码关注云+社区