1. 主页 > 行业资讯 > 设计文章 >

Axure教程:短信验证码实现倒计时

编辑指南:本文与大家分享如何使用Axure实现短信验证码的倒计时效果。作者对预习图、所需的基础原创、操作步骤逐一进行分析,并介绍了过程中需要注意的问题,希望对你有所启发。

这是一个新的用户注册交互,使用验证码倒计时。本文仅说明验证码倒计时功能,不判断用户名是否完整,如下图:

图1

动态面板来回切换的状态是隐藏的。为了减少验证码的秒数,如下图2所示:

图2

01基本组件

1.文本标签*2

2.动态面板* 1(两种状态命名为圆;矩形)

3.倒计时按钮*1

思考:

1.使用函数[[Math.random()]]、[[Math.exp()]]和[[substring(from,to)]]实现验证码倒计时

[[Math.random()]]这个函数会随机取一个0到1之间的数字,具体取几个小数点,网上没有说明。我试图得到15到18之间的位数,效果不大;

[[Math.exp(x)]]是用于获得数值的指标,例如[[Math.exp(2)]:表示e的二次幂的数值;

[[substring(from,to)]为截止字符串,例如[[V.substring(2,7)],其中v = 2343242342:表示截取值为432423;

这里将详细说明随机生成的6位验证码,稍后将忽略该功能

这里验证码是由以上三个函数生成的。可能还有更简单的方法。之前试过两个功能,但是总会有bug。因为[[Math.random()]]函数可能很小,比如:0.0000211,验证码生成不是六位,所以做了很多尝试。最后,为了生成100%随机的6位数,使用了三种函数组合:[[(数学。Exp(数学。Random ()) * 100000)。Substring (1,7)],意思是:随机取一个数值指数函数* 100000,然后截取数值的第1到第7位数字。这里乘以1,000,000就是去掉小数点;

2.点击验证码后,应显示倒计时。这里的倒计时应该是用动态面板来回转换显示秒,如上图2所示;

02详细添加交互(只说明验证码的倒计时功能,不判断用户名是否完整)

1.添加按钮并修改名称:验证码(设置交互样式:禁用时-灰色填充)

2.拖动2个文本标签(一个名称:显示文本;另一个名称:s(设置为隐藏)

3.添加动态面板(名称:简单验证码)

4、验证码添加动作:单击时-设置变量值-禁用-等待-显示-设置文本,如下图:4.验证码添加动作:点击-设置变量值-禁用-等待-显示-设置文本,如下图:

4.1设置变量值(这是一个全局变量,具有根据需要改变验证码倒计时时间的优点)

4.2在设置面板状态下(下一项-向后循环-循环间隔1000秒(为了实现验证码值的递减))

4.3当验证码被禁用时-等待1000秒-显示秒(此处隐藏一个文本,秒)

4.4设置文本

就是前面提到的函数[[(数学。exp(数学。random ()) * 100000)。子串(1,7)]]

03动态面板添加动作

这里不解释动态面板的动作,以便判断是否停止循环。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/519.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息