5.7　60s倒计时获取验证码

案例描述

单击“获取验证码”按钮，倒计时60s后，切换至“重新获取”按钮，“重新获取”按钮，倒计时60s。

思路分析

通过在动态面板中添加“获取验证码”“倒计时60s”“重新获取”3个面板状态来实现。设置“获取验证码”鼠标单击交互事件；在“倒计时60s”面板状态中添加一个文本框，设置“文本改变时”的交互事件；设置“重新获取”鼠标单击交互事件。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在“元件库”面板中将“文本标签”元件拖入编辑区合适的位置，双击输入“短信验证码”，然后拖入一个“矩形1”元件，在工具栏中设置“宽度”为90，“高度”为30，在“属性”面板中设置矩形“边框颜色”为灰色（#CCCCCC），“圆角半径”为3，效果如图5-57所示。

（3）在“元件库”中将“动态面板”拖入编辑区中的适当位置，并设置“宽度”为90，“高度”为30，在右侧“检视：动态面板”区域设置名称为verification，双击动态面板，弹出“面板状态管理”对话框，在“面板状态”选项组中单击两次+按钮，添加两个面板状态，分别重命名为gain、coundown和again，如图5-58所示。

（4）双击gain面板状态，进入verification/gain（index）编辑区，拖入一个“矩形2”元件，设置x、y均为0，“宽度”和“高度”分别为90、30，双击“矩形2”元件进入编辑状态，输入“获取验证码”，在“样式”面板中设置“填充颜色”为橘色（#FF9900），“圆角半径”为3，效果如图5-59所示。

（5）选择“获取验证码”，在右侧“属性”面板中单击“添加用例”超链接，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“设置面板状态”选项，在右侧“配置动作”区域选中“verification（动态面板）”复选框，“选择状态”设置为gain，如图5-60所示。

（6）在左侧“添加动作”区域选择“等待”选项，右侧“配置动作”区域保持默认；在左侧“添加动作”区域选择“设置文本”选项，右侧“配置动作”区域选中“coundown（文本框）”复选框，在“设置文本为”区域设置“值”为59，如图5-61所示，单击“确定”按钮返回至verification/gain（index）编辑区。

（7）单击index标签切换至index编辑区，双击verification动态面板，选择coundown面板状态，进入verification/countdown（index）编辑区，拖入一个“矩形2”元件到编辑区中，设置x、y均为0，“宽度”和“高度”分别为90、30，双击“矩形2”元件进入编辑状态，输入“s”，在“样式”面板中设置“填充颜色”为灰色（#D7D7D7），“圆角半径”为3，再拖入一个文本框至“矩形2”元件上，双击输入60，效果如图5-62所示。

（8）选择coundown文本框，在右侧“属性”面板中的“添加用例”区域双击“文本改变时”，弹出“编辑用例<文本改变时>”对话框，单击“添加条件”按钮，弹出“条件设立”对话框，将最后一个文本框设置为1，其他保持默认，如图5-63所示。设置“等待”为“1000毫秒”，设置coundown文本框的值为[[LVAR1-1]]。

（9）用同样的方法设置again面板状态、矩形样式，并设置鼠标单击时的动作，如图5-64所示。

（10）切换至index编辑区，按Ctrl+S快捷键，以“5.7”为名称保存该文件，然后按F5键预览效果，如图5-65所示。