Axure实现随机验证码

Axure实现随机验证码

平时喜欢浏览网页的小伙伴,在往上登陆账号什么的,都会需要验证码,就像一种安全措施,而且验证码都是随机的,可能有一些比较简单,有一些比较复杂,今天就给大家分享一下使用Axure实现随机验证码的教程。

首先,我们先来看看最终要实现的效果。

Axure验证码

如上图所示,这个随机数验证码有以下特点:

1、包含数字、小写字母和大写字母;

2、验证码文字是一种手写体;

3、页面打开时,即显示验证码;

4、验证码是随机的;

5、验证码位数为4位。

6、点击验证码时,能够获取新的验证码。

接下来,我们就根据以上特点来逐步实现这个效果。

第一步,准备元件,包括一个用于显示验证码的矩形和一个写入所有字母与数字的文本标签。

Axure文本标签

第二步,把矩形“IdentifyingCode”的字体设置成【MV Boli】。

Axure设置字体

第三步,页面打开时,即显示验证码;

我们在矩形“IdentifyingCode”的【更多事件】中找到【载入时】,为其设置交互,添加动作为【设置文本】,并勾选“当前元件”,然后点击【fx】按钮,打开【编辑文本】的界面。

Axure设置文本

第四步,验证码是随机的;

这是最关键的一步。

想获取4位随机验证码,我们先来想一想,怎么获取1位随机验证码?

这需要先了解,怎么获取随机数。

在Axure中,给我们提供了一个随机数的函数random()。

Axure随机函数

这个random()函数,能够帮助我们获取0~1之间的一个随机小数。

也就是说它的随机取值范围是:0.00000…1~0.99999…9

那么,怎么通过这个函数获取整数随机数呢?

例如:12~33之间的随机整数怎么能够获取到?

我们先来数一下12~33之间的数字一共有多少个?结果是22个。

然后,我们想一下,如果用random()获取的随机小数乘以22,那么,结果的范围是:0.00000…~21.99999…

对于这个结果,我们只取整数的话,那么,范围就是:0~21

在这个取值范围的基础上,我们加上起始数12,最终结果的范围就是:12~33

也就是说,随机整数的公式是:向下取整(随机数*获取个数)+起始数

有了这个公式之后,我们的问题在于怎么向下取整。

在Axure也给我们提供了向下取整函数floor(x),x为参数,需要填入要取整的数值。

有了上面的这些函数和公式,接下来,我们要考虑如何从准备好的文本标签“Chars”的元件文字中随机获取字符。

这里还要用到一个函数charAt(index),这个函数能够获取字符串中指定位置的字符,很显然参数index是要获取的字符的位置。

那么,大小写字母以及数字一共是……

等会儿,我数数……

嗯,一共是56个……不对,是62个字符……

62个字符组成的字符串,字符位置是从0~61,也就是说,我们对字符串取随机位置的字符时,位置的计算公式是:向下取整(随机数*62)

所以,我们在【编辑文本】的界面中,先通过一个局部变量c获取到文本标签“Chars”的元件文字,然后在变量c中取随机位置的字符,具体公式为:[[c.charAt(Math.floor(Math.random()*62))]]

Axure变量

第五步,验证码位数为4位。

我们把能够获取1位随机字符的公式复制,在后方粘贴3次。

这样每一个公式都能够获取1个随机验证码,然后,连接到一起,形成4位验证码。

Axure添加变量

第六步,点击验证码时,能够获取新的验证码。

我们将刚才在元件【载入时】设置的交互,复制到元件的【鼠标单击时】,这样在点击元件的时候,就也能获取验证码了。

Axure点击文字

通过以上步骤,我们就完成了包含大小写字母以及数字的随机数验证码。更多感兴趣的教程,点击文章:Axure使用中继器实现随机数字键盘

在线客服
客服邮箱
客服电话
17051276424