欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

Axure RP8怎么设计倒计时获取短信验证码效果?

程序员文章站 2023-11-19 22:59:40
Axure RP8怎么设计倒计时获取短信验证码效果?...

现在很多网站都会使用短信验证码,该怎么使用axure设计一个带有倒计时的短信验证码呢?下面我们就来看看详细的教程。

要实现倒计时的功能在axure中需要借助两个元件配合才能完成,一个元件是“获取短信验证码”的按钮;另一个元件是动态面板;同时还需要一个变量;变量在这里相当于一个计时器,我们先把变量设置为60时,一旦启动了,就从60一直倒计时到0;

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

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

Axure RP8怎么设计倒计时获取短信验证码效果?

Axure RP8怎么设计倒计时获取短信验证码效果?

短信验证码通常出现在登录、注册、忘记密码等场景下需要用户手工点击“获取短信验证码”按钮来触发系统发短信,同时按钮会改变成倒计时状态,希望大家喜欢,请继续关注。