Axure 8.0实例:随机短信验证码

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

本文给大家讲解的是,如何用Axure制作随机短信验证码,enjoy~

预览:

Axure 8.0实例 | 随机短信验证码

一、元件准备

(1)添加全局变量三个,分别取名为“yzmcl”、“yzm”、“djs”。“yzmcl”设置默认值为“0123456789”,用于随机验证码取值范围;“yzm”设置默认值为空,用于存储随机生成的验证码;“djs”设置默认值为空,用于可再次发起获取验证码的时间间隔。

Axure 8.0实例 | 随机短信验证码

(2)添加一个矩形框,命名和文字信息为“获取验证码”。

(3)添加动态面板两个,分别取名为“验证码提示信息”和“验证码倒计时”。“验证码提示信息”中放置一个矩形框“短信内容”用于展示短信信息,隐藏动态面板备用。

“验证码倒计时”有两个state,state1中放置两个矩形框,其中一个矩形框命名为“倒计时1”;另外一个矩形框文字信息为“s重新获取”,且保持该矩形框形状大小与“获取验证码”矩形框一致。

Axure 8.0实例 | 随机短信验证码

state2放置内容同state1,其中一个矩形命名为“倒计时2”。

Axure 8.0实例 | 随机短信验证码

(4)将“验证码倒计时”动态面板与“获取验证码”矩形框重合放置,并将“获取验证码”矩形框设置为置顶。

二、添加用例

(1)给当前页面设置载入用例

目前短信验证码的位数一般为4位或者6位随机数字,本文以6位为例。

Axure 8.0实例 | 随机短信验证码

①在页面载入时,判断全局变量“yzm”的位数是否小于6。

Axure 8.0实例 | 随机短信验证码

如果小于6则从“yzmcl”中随机获取一个数字,并将获取的数字并入“yzm”。

Axure 8.0实例 | 随机短信验证码

说明:

  1. substr(start,length)为字符串截取函数,start为截取的开始位置的下标,从0开始;length为截取的长度;
  2. Math.floor()为向下取整函数;
  3. Math.random()为随机函数,随机生成一个0~1之间的数。

[[yzmcl.substr(Math.floor(Math.random()*10),1)]]的含义:

  1. 使用Math.random()函数随机生成一个0~1之间的数值;
  2. 将该数值扩大10倍,即可获取一个0~10之间的数值;
  3. 使用Math.floor()函数向下取整,即可获取一个0~9(包含0和9)的整数;
  4. 使用substr()函数从“yzmcl”中截取第三步中获取的整数的下标对应的数字;
  5. 然后触发页面的“页面载入时”的用例,继续判断“yzm”的位数是否小于6,直到“yzm”的位数等6时退出当前循环,此时便已经生成了一次6位随机的数字验证码。

Axure 8.0实例 | 随机短信验证码

(2)给“验证码倒计时”动态面板添加状态改变时用例。

Axure 8.0实例 | 随机短信验证码

判断“djs”的文字内容是否大于0。

Axure 8.0实例 | 随机短信验证码

①如果“djs”的文字内容大于0,则将“djs”的文字内容减去1。

Axure 8.0实例 | 随机短信验证码

②设置“验证码倒计时”面板循环改变,每隔1s,即1000ms改变一次。

Axure 8.0实例 | 随机短信验证码

③设置“验证码倒计时”动态面板中的“倒计时1”和“倒计时2”的文字信息为“djs”的文字内容。

Axure 8.0实例 | 随机短信验证码

“djs”的文字内容小于等于0时,直接显示并置顶“获取验证码”矩形框。

Axure 8.0实例 | 随机短信验证码

(3)给“获取验证码”添加用例

Axure 8.0实例 | 随机短信验证码

①点击“获取验证码”按钮时,首先给“djs”变量赋值为60,即倒计时总长度为60s。

Axure 8.0实例 | 随机短信验证码

②设置“验证码倒计时”动态面板中的“倒计时1”和“倒计时2”的文字信息为“djs”的文字内容。

Axure 8.0实例 | 随机短信验证码

③触发“验证码倒计时”面板循环,每隔1s,即1000ms循环一次。

Axure 8.0实例 | 随机短信验证码

④显示并置顶“验证码倒计时”。

Axure 8.0实例 | 随机短信验证码

⑤设置“yzm”的值为空。

Axure 8.0实例 | 随机短信验证码

⑥触发页面载入时用例。

Axure 8.0实例 | 随机短信验证码

⑦设置“验证码提示信息”面板中的“短信内容”矩形框文字信息。

Axure 8.0实例 | 随机短信验证码

⑧显示“验证码提示信息”动态面板。

Axure 8.0实例 | 随机短信验证码

 

作者:无泪,个人公众号:杨小贝,一起探讨原型设计

本文由 @无泪 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pexels,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 公众号叫啥啊

    回复
  2. 如何让那个短信内容动态面板显示一段时间自后隐藏起来呢

    回复
    1. 加公众号下载源文件

      回复
  3. 这软件有点厉害。,。

    回复
    1. 关注公众号,可下载源文件 :cool:

      回复
  4. 看着有点小复杂,蛮高级的样子

    回复
    1. 如有有兴趣,可以关注我的公众号下载源文件

      回复
圈子
关注微信公众号
大家都在问