小白最近在练习Axure rp8的使用，在做电商倒计时效果时遇到了“坎”。网上冲浪很久，充分利用广大网友的力量，总结了一个简单的实现方法。于是立刻想和大家来分享一下，欢迎大家上前围观，指出不足，共同进步。哈哈~
（1）逻辑说明
倒计时由三部分组成，分别是时、分、秒。假设秒从0开始，则接下来的状态59、58...
当秒变为0时，分的数值减1，秒变为59；当秒和分的数值都变为0时，时的数值减1，分和秒变为59；当秒、分、时均为0时，计时停止。
(2)准备工作
首先，向页面中拖拽三个“文本框”元件，分别命名为时、分、秒（方便后续操作）。再向页面拖拽一个“矩形”元件，将其转换为动态面板，并为它添加两个状态。
设置动态面板
（3）具体步骤
①对动态面板的操作：点击动态面板，为其“载入时”的事件添加用例。点击“设置面板状态”，选择当前元件，选择状态设为“Next”并勾选向后循环，勾选循环间隔为1000毫秒，即1秒。勾选首个状态延迟1000毫秒后切换（此步骤通过改变面板状态，达到后续数秒的目的）。
设置面板循环
为动态面板的“状态改变时”事件添加用例1。首先，添加条件：“秒”文本框文字大于0时。
添加条件
设置条件
接下来，选择“设置文本”，设置“秒”文本框。设置文本为“值”，点击fx，首先设置一个局部变量LVAR1为“秒”文本框文字；然后点击“插入变量或函数”，选择局部变量LAVR1，将“秒”文本框值设置为LAVR1-1。
设置“秒”的值
设置局部变量及“秒”文本内容
继续为动态面板的“状态改变时”事件添加用例2，添加条件：“秒”文本框文字为0时。
添加条件
选择“其他”下的“触发事件”，选择“秒”元件，点击文本改变时（此步骤，处理倒计时开始时间秒为0的情况）。
设置触发事件
②对“秒”文本框的操作：为其“文字改变时”事件添加用例1，添加条件：“秒”文本框文字等于0且“分”文本框文字大于0。
添加条件
选择"设置文本"，将“秒”文本框值设为59；“分”文本框，设置文本为“值”，点击fx，添加局部变量LAVR1为“分”文本框的值，将“分”文本框值设置为LAVR1-1。
用例1
继续为“文本改变时”事件添加用例2，添加条件：“秒”文本框文字等于0且“分”文本框文字等于0且“时”文本框文字大于0。
添加条件
选择“设置文本”，将“秒”文本框值设为59；“分”文本框值设为59；“时”文本框，设置文本为“值”，点击fx，添加局部变量LAVR1为“时”文本框的值，将“分”文本框值设置为LAVR1-1。
用例2
到这里，我们的基本操作就完成了。在三个文本框里分别输入倒计时开始的时、分、秒，点击预览就能看到效果啦！
举例
效果
不过，这样看起来好像不太美观。我们将文本框边框和动态面板隐藏。效果如下，是不是好看了一点呢~
隐藏边框效果
想让它变得更美观的话，大家就自己来动手试试吧！
网友评论