用Axure制作60s倒计时

最近一直沉迷于学习画各种高保真的原型图，在学习了在Axure上如何获取电脑的动态时间后，我开始琢磨如何制作倒计时，因为我感觉这个和获取动态时间应该有异曲同工之妙，好了，我们切入正题。

构思

我们先来构思一下整个倒计时需要用到什么元件，我想做的是一个获取短信验证码的功能，点击获取短信验证码之后，右侧会出现，XX秒之后可重新获取验证码，所以首先肯定要有的是一个矩形框当做获取短信验证码的按钮。
其次，我们根据之前获取动态时间的经验来说，动态的时间一秒一秒的递增或递减是要有一个动态面板的两个页面之间的相互交替。
想好了用什么原件之后我们来想一下如何才能实现，因为是基于60秒的倒计时，所以我们要先设定一个全局变量，并将其的默认值设为60，因为是一秒一秒的递减，所以要设置一个函数为全局变量=全局变量-1，这样每次传递到下个面板的变量都是上个面板变量的-1，然后两个页面互相交替，最后到达0秒，整个倒计时结束，动态面板停止循环。重新点击“获取短信验证码”的按钮开启下一次循环。

准备工作

1.1 从元件库中拖出一个矩形框 一个动态面板，在动态面板中的页面1放入一个文本框。

注意随手取名字哈，好习惯早养成~
按钮我取名为“获取验证码” 两个文本框分别取名为“矩形1”、“矩形2” 动态面板为“获取验证码”
注意把两个文本框中的“文本标签”四个字删掉，要不然预览之后就会看见“文本标签”四个大字摆在那里

1.2 复制页面1的动态面板

设置全局变量

实现交互

1.1为“获取验证码”添加交互动作

点击“鼠标单击时”，这步是为了让两个面板交替出现，体现递减的变量值

一开始做的时候，我只在这个按钮上加了这一个交互动作，但是做成之后，在倒计时中，我多次点击“获取验证码”按钮，发现动态面板的交替速度变快，倒计时没有意义，所以我多加了一步，禁用此按钮。

1.2为动态面板添加交互动作

点击“动态面板”再点击右侧 状态改变时，先设置一个判定条件，当变量值countdown>0的时候 countdown= countdown-1
当countdown<=0的时候，倒计时结束，重新开始新循环。


点击fx函数

给动态面板中两个矩形框赋值。

“[[countdown]]秒后可重新获取验证码”

拿走直接黏贴哈哈哈哈

当countdown<=0时，倒计时结束，文本框应显示，“可重新获取验证码”

我们让变量值重新回归60以便下一次循环。

启用“获取验证码”功能

让动态面板停止循环

这个时候我们点击预览就可以成功预览到一个60s倒计时功能啦~成功之后我发现，最后“0秒后重新获取短信验证码”还停顿了一秒，往前面查看了一下是条件的问题，当countdown>0 的时候，countdown=1/2/3/4/5…这就导致在countdown-1的时候会出现0秒这个问题，改成countdown>1就好了