），所以，这里我们先在页面中拖入一个动态面板，并确保动态面板中至少有 2 个状态（状态中无需放置任何内容，Axure 9.0 建议将动态面板拖动到【负空间】）：

　　生成器循环时，判断验证码【code】的长度是否等于指定的位数【code_bits】，如果是，表示已经从字库【code_liabrary】中挑选出足够字符，这时可以停止生成器循环，并把验证码显示出来；

　　如果验证码的长度【code】不等于指定位数【code_bits】，表示还没有挑选出足够的字符，这个时候就从字库【code_library】随机挑选一个字符添加到验证码【code】中，直到字符数满足指定的位数，停止生成器循环并将验证码显示出来。

　　思路基本清晰了，但在动手之前，我们还需要知道这个设计中的一个难点，就是怎么从字库【code_library】中【随机】挑选一个字符，这里就会涉及到几个【函数表达式】：

　　LVAR.charAt ( index ) ：我们可以用这个函数来从字库【code_library】中取字符，这个函数的作用是从字符串【LVAR】中取出排在【index】位置的字符，这里需要注意，【index】的索引值是从 0 开始的，也就是说，index = 0 表示取出第一个字符，index = 1 表示取出第二个字符，以此类推，最后一个字符的 index = LVAR.length-1。

　　首先给验证码添加点击事件，【单击时】开启验证码生成器（动态面板）循环，循环间隔设为 0 毫秒即可：

　　接着，我们给验证码生成器添加【状态改变时】的事件，这里需要区分两种场景：

　　场景 1：验证码位数 = 指定位数，表示验证码生成成功，我们只需要停止生成器循环并把验证码显示出来即可：

　　场景 2：验证码位数≠指定位数，表示验证码未生成成功，需要从字库中随机挑选一个字符添加到验证码【code】中：

　　上图中后半部分的表达式上文已经解释过了，这里就不再赘述，关于为什么要在那个表达式前面加上 [ [ code ] ] ，这里解释一下：

　　假设验证码生成器循环 4 次，每次从字库中抽出的字符分别是 1、2、3、4，如果不加 [ [ code ] ] ，则循环 4 次分别是以下 4 种结果：

　　从上面 4 次循环的结果可以看出，每次生成之后都会给【code】重新赋值，所以【code】永远都只会有一个数字，就会陷入无限的循环中，而在前面添加 [ [ code ] ] 之后，4 次循环的结果是：

　　因为每一次循环都会将之前已经生成的【code】拼接到新生成的【code】，再重新赋值给【code】，所以才能形成上述这种追加内容的效果，然后在第四次循环结束之后，验证码【code】长度满足指定长度，退出循环并显示验证码，接下来我们在浏览器中看看效果：

　　效果是对的，但是只有第一次点击有效，后面怎么点击都不会变化，哪里出了问题呢？

　　我们来分析一下，既然第一次点击能生成说明随机生成验证码的逻辑是没有问题的，那问题应该是出在判断验证码位数的那个逻辑上，原来，【code】默认是空的，所以第一次点击的时候能够正常生成，但是第二次点击的时候，因为【code】已经有值，所以不会再次生成，所以这里我们在点击验证码时，应该先清空【code】：

　　这样就能确保每次点击验证码时【code】都没有值，才能够正常生成，再来看看修改后的效果：

　　现在还有一个问题，就是验证码在载入时就会自动生成，但目前还是显示我们设置的默认文本，这里我们做个简单的优化，你可以将验证码【单击时】的事件复制粘贴到验证码【载入时】的事件中，不过这里有一种更简单的方式，就是给验证码【载入时】添加触发验证码【单击时】的事件，简单说就是在验证码载入时自动点击自身并生成：

　　最后，来验证一下验证码位数控制的功能是否正常，将【code_bits】改为 6，再看看效果：