倒计时效果-Axure

2016-03-23  本文已影响111人  咔咪儿

今天主要介绍利用文本框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预览查看吧!

上一篇下一篇

猜你喜欢

热点阅读