倒计时效果-Axure

今天主要介绍利用文本框OnTextChange(文本改变)事件制作倒计时交互效果。

我们先看下成品效果:


制作步骤如下

1. 准备所需部件:矩形框、 动态面板


(1)矩形框:矩形框输入文字“请输入手机验证码”;边框、字体均设为灰色

(2)动态面板:共三个状态,三个状态具体设置如下

2.设置动态面板-huoqu-矩形框的点击事件OnClick:

(1)设置点击后动态面板状态到“daojishi”

(2)设置动态面板“daojishi”的文本控件num文本为“10”【说明:num默认为11,当为10时,可触发文本框的OnTextChange事件】


动态面板"huoqu"的点击事件


设置num文本内容为10

3.设置动态面板“huoqu”状态“num”文本框的OnTextChange事件

(1)当num大于0,每隔一秒(wait 1000毫秒),num的显示文本自动减1

(2)当num等于0,设置动态面板状态到“chonghuo”

动态面板“huoqu”状态“num”文本框的OnTextChange事件


当num文本大于0


                                                                         设置文本框显示内容自动减1

4.设置动态面板“chonghuo”中矩形框的点击事件:

(1)点击后动态面板状态切换到“daojishi”

(2)设置文本框num的文本为“10”【说明:此时num从0改为10,可触发文本框的OnTextChange事件】


5.F5预览查看吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容