说说Axure。

许多小伙伴还不会使用Axure RP8制作倒计时获取短信验证码效果,今天酷牛教程小编就带来了关于Axure RP8制作倒计时获取短信验证码效果的教程。

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

1.png

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

说说Axure。

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

说说Axure。

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

说说Axure。

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

说说Axure。

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

说说Axure。

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

说说Axure。

说说Axure。

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

说说Axure。

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

说说Axure。

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

说说Axure。

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

说说Axure。

说说Axure。

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

上面就是为各位亲们带来的Axure RP8制作倒计时获取短信验证码效果的教程,一起去了解了解吧。

本文来自投稿,不代表酷牛教程立场,如若转载,请注明出处:https://www.ddddtttt.com/134250.html

(0)
上一篇 12小时前
下一篇 12小时前

相关推荐

  • 分享使用Axure。

     ??最近酷牛教程小编遇见不少的用户询问使用Axure RP 如何设置树状菜单?下文就为你们分享了使用Axure RP设置树状菜单的具体操作…

    12小时前
    00
  • 图文详解Axure。

    不少朋友都喜欢使用Axure 8软件,那么大家清楚Axure 8设计三级折叠菜单的简单操作吗?若还不了解,就来学习学习Axure8设计三级折叠菜单教程吧! Axure 8设计三级折…

    15小时前
    00
  • 说说Axure。

    许多小伙伴还不了解Axure PR 8制作多个按钮的详细操作,而下面就分享了Axure PR 8制作多个按钮的操作方法,希望感兴趣的朋友都来共同学习哦。 Axure PR 8制作多…

    17小时前
    00
  • 今天分享Axure。

    熟悉Axure RP 8软件是很简单的,但是大家知道制作拱桥倒影图的操作吗?今天笔者就分享Axure RP 8制作拱桥倒影图的操作方法,一起来看看吧! Axure RP 8制作拱桥…

    2025-11-13
    035
  • 关于Axure。

    部分用户在使用Axure RP 8.0软件的时候,并不是很熟悉其中制作自适应页面元件的方法?今日在这里酷牛教程小编就为各位带来了Axure RP8.0制作自适应页面元件的具体教程。…

    2025-11-01
    046
  • 分享Axure。

    今天酷牛教程小编讲解了在Axure RP 8绘画漂亮游泳圈图形步骤,下文就是关于在Axure RP 8绘画漂亮游泳圈图形的教程,一起来学习吧。 Axure RP 8绘画漂亮游泳圈图…

    2025-09-23
    038
  • 我来教你Axure。

    很多新手小伙伴还不了解Axure RP 8设置显示网格的具体操作,所以下面酷牛教程小编就带来了Axure RP 8设置显示网格的详细教程哦。 Axure RP 8设置显示网格的具体…

    2025-09-01
    044
  • 关于Axure。

     很多人的工作中都需要使用大Axure RP软件,那么你们晓得Axure RP是怎么制作文字滚动动态效果的呢?下文就为你们带阿里了Axure&ensp…

    2025-07-17
    046
  • 说说Axure。

     一些同学们在使用Axure RP的时候,出现无法预览页面的情况,该怎么处理呢?下文就为大伙带来了Axure RP出现无法预览页面的具体解决方法。&e…

    2025-07-07
    044
  • 小编分享在Axure。

    酷牛教程小编今天讲解在Axure RP 8中用函数统计字符串长度的操作过程,接下来就一起学习在Axure RP 8中用函数统计字符串长度的操…

    2025-06-16
    043