手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Axure RP 8获取短信验证码倒计时交互效果的实现

时间:2024-10-12 18:21:00

1、拖一个矩形,设置好长宽高,并命名为SendSMS;

Axure RP 8获取短信验证码倒计时交互效果的实现

2、拖一个动态面板,随便放一个位置都可以,(本例放在矩形框上方一点),将动态面板命名为Clock,并设置两个状态,分别为状态1、状态2;

Axure RP 8获取短信验证码倒计时交互效果的实现

3、设置一个变量,等赋值之后,作为开始倒计时作用;

Axure RP 8获取短信验证码倒计时交互效果的实现

4、上述三步准备工作做好后,咱开工设置吧;首先选中矩形框SendSMS,编辑用例“鼠标单击时”,给变量Daojishi设置一个初始值60,意为从60秒开始倒计时;

Axure RP 8获取短信验证码倒计时交互效果的实现

5、紧接着设置动态面板Clock中的状态1、状态2,循环着切换状态,1000毫秒切换一次;这举是为了触发动态面板的“面板状态改变时”事件。

Axure RP 8获取短信验证码倒计时交互效果的实现

6、设置动态面板Clock“状态改筐毙险裆变时”事件,新增条件在变量Daojishi>0的情况下,设置矩形框SendSMS里文字变更为“Daojishi秒后重新获取”。

Axure RP 8获取短信验证码倒计时交互效果的实现
Axure RP 8获取短信验证码倒计时交互效果的实现

7、设置Daojishi变量值自减1,意为判断在每次当变量值Daojishi>0时,动态面板Clo艘早祓胂ck第1秒切换一次状态时,而Daojishi值由60变成59;再1秒后循环切换到下一状态时,Daojishi值由59变成58;以此类推...

Axure RP 8获取短信验证码倒计时交互效果的实现

8、最后再设置一下当Daojishi值自减到0时的情况,设置动态面板不再切换状态了,即设置Clock为停止循环;

Axure RP 8获取短信验证码倒计时交互效果的实现

9、此时SendSMS矩形框内的文字停止在“0秒后重新获取”,不再倒计时了;但不符要求,需要调整为“重新获取验证码”,操作如下图所示:

Axure RP 8获取短信验证码倒计时交互效果的实现

10、至此所有设置已完成,咱预览下效果如下:

Axure RP 8获取短信验证码倒计时交互效果的实现
Axure RP 8获取短信验证码倒计时交互效果的实现
© 手抄报圈