IT博客汇 | 使用动态面板实现60秒倒计时

使用动态面板实现60秒倒计时

小楼一夜听春语发表于 2016-11-13 08:20:50

看到很多同学想知道60秒倒计时的实现过程，特此写下这篇教程。

首先，先来说说思路。

1、要有一个记录初始秒数和剩余秒数的容器，我们创建一个全局变量来记录。【步骤1】

2、要有一个获取验证码的按钮，和一个可以实现循环功能的元件-动态面板。动态面板可以通过切换状态实现循环，就必须有2个（含）以上的状态。【步骤2】

3、按钮默认为蓝色，点击后变成灰色。这需要为按钮预置禁用时的样式。【步骤3】

4、点击按钮时，要开启循环（【步骤4】）。并且，按钮不可再次点击（【步骤5】）。

5、循环时，如果时间记录大于“1”（【步骤6】），则要让秒数记录递减（【步骤7】）。并且，设置按钮显示最新时间与文字（【步骤8】）。

6、否则，即为倒计时结束。这时要让按钮显示文字“重新获取验证码”（【步骤9】），并且将时间记录恢复为“60”（【步骤10】），按钮也要重新变成可点击的状态（【步骤11】），最后还要停止循环（【步骤12】）。

注意：先读懂上述内容，才能很好的理解下面的实现过程。

接下来，是具体实现步骤。

1、在【项目】菜单中，点击【全局变量】，添加一个新的全局变量“TimeValue”。

2、在画布中放入一个矩形按钮，命名为“GetButton”；再放入一个动态面板，命名为“LoopPanel”；双击动态面板，点击“+”，为其添加一个新的状态“State2”（这一步是为了保证动态面板能够切换状态）。

3、为按钮“GetButton”设置【禁用】状态的交互样式，【填充颜色】为灰色。

4、为按钮“GetButton”添加【鼠标单击时】的用例，设置动作为【设置面板状态】于动态面板“LoopPanel”，选择状态【Next】，勾选【向后循环】，设置自动循环间隔为【1000】毫秒，取消【首个状态延时1000毫秒切换】的选项。

5、继续添加动作【禁用】【当前元件】。

6、为动态面板“LoopPanel”的【状态改变时】添加第一个用例并设置条件，条件设置为【变量值】【TimeValue】【>】【值】“1”。

7、添加满足条件的动作为【设置变量值】【TimeValue】为【值】“[[TimeValue-1]]”。

8、继续添加动作，【设置文本】于“GetButton”为【值】“[[TimeValue]]秒后可重新获取”。

9、为【状态改变时】再次添加用例，设置不满足第1个用例的条件时执行的动作。第1个动作为【设置文本】于“GetButton”为【值】“重新获取验证码”。

10、第2个动作为【设置变量值】为【值】“60”。

11、第3个动作为【启用】按钮“GetButton”。

12、第4个动作为【设置面板状态】于动态面板“LoopPanel”，选择状态为【停止循环】。

最后，按“F5”键，在浏览器中查看做好的原型效果。

这个案例，我没有污，规规矩矩的写出了整个案例过程。这个教程应该是实现这个案例最简洁的方法，你看我屌不？

---------------------------------------------------- End ----------------------------------------------------

小楼老师再出新作，倾力打造Axure RP 8精品课程系列，全新的套路，经典的姿势，更舒爽，更润滑，更紧致，更销魂，想体验这种欲罢不能的学习感觉？快从下面进入！

《AxureRP 8 入门与实战》------从零开始快速入门的最佳课程------<<想上它，插这里！>>