Axure制作：倒计时（获取验证码案例）

1、新建2个按键，1个标签，及2个文本框：

1.修改1个“标签”内容为：短信验证码

2.修改1个“按键”内容为：获取验证码，命名为：按键1

3.修改1个“按键”内容为：重新发送（     s ），命名为：按键2

4.命名一个“文本框”为：倒计时

如图所示：

2、“文本框：倒计时”与“按键2”做如下图布局，并组合下（方便操作）：

3、1.两个按键“按键1”和“按键2”重叠在一起

2.“按键1”在顶层

3.“文本框：倒计时”隐藏边框

按下图方式布局：

4、为了体现获取验证码时，按键不能被点击，所以设置“按键2”的禁用状态时，显示字体颜色为：#999999

5、设置“按键1”的“鼠标单击时”的动作：

---

1.“按键2”和”文本框：倒计时“置顶

2.设置“文本框：倒计时“内容为10

---

6、设置“文本框：倒计时”的“文本改变时”的动作，有2个条件动作：

7、条件1：

---

当”倒计时“的值大于等于1时

---

如下图所示：

8、动作1：

---

1.等待1000毫秒（就是等待1秒）

2.”倒计时“的值减1

---

9、条件2：

---

当”倒计时“的值等于0时

---

如下图所示：

10、动作2：

---

1.将”按键2“和”文本框：倒计时“置于底层

2.设置”按键1“的内容为”再次获取验证码“

---

11、所有动作汇总截图如下：

12、动作设置完后，就可以看效果了

点击”获取验证码“进入倒计时阶段，是不是很不错~

这是一个不用动态面板制作的案例，很是简单~

觉得不错的话，请投个票，加个赞哦~