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