获取包含大小写字母与数字的随机验证码

AxureRP8.0教程 小楼一夜听春语 2885℃ 0评论

在互联网上,无论是Web端还是移动端,因为安全验证的需要,随机数验证码随处可见。

这篇教程,我就来和大家说说,如何获取随机数,并通过随机数做出验证码。

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

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

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

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

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

4、验证码是随机的;

5、验证码位数为4位。

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

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

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

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

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

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

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

这是最关键的一步。

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

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

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

这个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))]]

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

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

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

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

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

通过以上步骤,我们就完成了包含大小写字母以及数字的随机数验证码。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/identifying_code.rp

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 获取包含大小写字母与数字的随机验证码

喜欢 (19)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 学会了,顺便复习了一下很少用的计算函数哈哈哈
    蛋饺2017-07-20 14:10 回复
  2. 沙发
    liangllk2017-07-20 14:41 回复
  3. 这个为什么出来的验证码不是always四位啊
    ASDG2017-07-20 16:43 回复
  4. 很有用,但是为什么我的不点击之前看不到验证码呢
    ccc12017-07-31 21:00 回复
    • 没有设置载入时?
      王二莉2017-08-08 17:04 回复
  5. 你们没看出这图随机码的意思吗?我爱SM
    djiprvtd2017-08-01 18:17 回复
  6. 为啥有时候只有两位或者一位验证码??
    大摆2017-08-07 22:35 回复
  7. 有3位的?
    王二莉2017-08-08 11:39 回复