美文网首页
倒计时效果-Axure

倒计时效果-Axure

作者: 咔咪儿 | 来源:发表于2016-03-23 14:05 被阅读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预览查看吧!

    相关文章

      网友评论

          本文标题:倒计时效果-Axure

          本文链接:https://www.haomeiwen.com/subject/fubllttx.html