axure如何制作验证码发送倒计时

2026-03-28 07:18:25

1、首先拉入一个作为发送验证码的矩形,输入发送验证码字样

axure如何制作验证码发送倒计时

2、点击项目,选择全局变量,并新建一个名为30,默认值为30的变量

axure如何制作验证码发送倒计时

axure如何制作验证码发送倒计时

3、点击文本框,选择属性,鼠标单击时,为其设定交互。

如下图,选择设置文本,勾选当前元件,设置文本值为刚刚设定的全局变量time

axure如何制作验证码发送倒计时

axure如何制作验证码发送倒计时

4、接下来设置等待时间,让该文本框的文字每隔一秒变化一次,点击case1刚刚设定的交互事件,选择其他-等待。

再选择设置变量值,勾选time,将其设置为time-1的形式

axure如何制作验证码发送倒计时

axure如何制作验证码发送倒计时

5、接着触发文本变化,即变为“29秒后重新获取”,并且重复执行交互。

即选择触发时间,勾选当前元件

此时点击预览即可实现该功能

axure如何制作验证码发送倒计时

axure如何制作验证码发送倒计时

1、当实现了功能之后,文本框应该变成重新获取,然后再重新执行倒计时效果。

因此我们还需要对全局变量进行判断,即当全局变量大于等于0时,上述交互继续,否则就让文本变成重新获取,并使全局变量变为30,重复这样一个交互过程

2、所以我们给case1添加交互条件,当变量值time>=0时,执行事件

axure如何制作验证码发送倒计时

3、重新点击当鼠标单击时,生成case2

选择设置文本-勾选当前元件,设置文本值为重新获取;

选择全局变量-勾选time将值设置为30;

此时再预览就可以实现重复交互的效果

axure如何制作验证码发送倒计时

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢