案例描述
单击获取验证码的按钮后，该按钮被禁用，显示倒计时；计时结束后启用按钮，并恢复文本内容为“获取验证码”。
案例难度★★★★☆
案例技术
页面载入时事件、动态面板状态改变时事件、全局变量
案例说明
在用手机号进行账号注册或登录时，为了确保账号安全，一般会发送动态验证码，再次发送的倒计时一般为60s，本案例中为了节约预览效果的时间，只制作倒计时5s。
案例思路
利用动态面板可以定时循环切换面板状态的属性，可以把它当成一个计时器，设置成每秒钟改变一次面板状态，在改变状态时，切换显示的倒计时。
制作步骤
不涉及到交互效果的元件就不再赘述了，大家可以自行设计布局。
（1）拖入一个“主要按钮”至设计区域，命名为getCode，修改文本为“获取验证码”，如图4‑60所示。
1. 图4‑60
（2）设置获取验证码按钮在禁用时的交互样式，如图4‑61所示。
①选中getCode，单击属性面板中的“禁用”按钮，打开交互样式设置对话框。
②勾选字体颜色，设置为#FFFFFF。
③勾选填充颜色，设置为#CCCCCC。
2. 图4‑61
（3）拖入“动态面板”至设计区域，命名为temp，再添加一个状态。因为动态面板起到计时作用，所以两个状态里均不需要添加任何内容，如图4‑62所示。
3. 图4‑62
（4）新增全局变量用来保存时间，如图4‑63所示。
①单击【项目>全局变量】，打开全局变量对话框。
②单击“加号”，新增全局变量。
③把变量命名为seconds。
4. 图4‑63
（5）单击获取验证码按钮，把时间初始化为5s，如图4‑64所示。
①选中getCode，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②添加“设置变量值”动作。
③在右侧的配置动作区域勾选seconds。
④设置变量值为5。
5. 图4‑64
（6）启动计时器，如图4‑65所示。
①不要关闭用例编辑器，继续添加 “设置面板状态” 动作。
②在右侧的配置动作区域勾选temp。
③选择状态为Next，并勾选“向后循环”，设置并勾选“循环间隔为1000毫秒”，每秒钟切换一次面板状态，相当于计时器。
6. 图4‑65
（7）禁用获取验证码按钮，如图4‑66所示。
①不要关闭用例编辑器，继续添加“禁用”动作。
②在右侧的配置动作区域勾选“当前元件“。
7. 图4‑66
（8）计时器启动后开始倒计时，如图4‑67所示。
①选中temp，双击属性面板中的“状态改变时”事件，打开用例编辑器。
②单击“添加条件”按钮，打开条件设立对话框。
③依次设置条件参数：变量值、seconds、>、值、0，然后单击“确定”按钮。
④选择【添加动作>元件>设置文本】。
⑤在右侧的配置动作区域勾选getCode。
⑥设置文本值为[[seconds]]s。
⑦接下来要把时间减1，继续添加动作“设置变量值”，把seconds的值设置为[[seconds-1]]。
8. 图4‑67
（9）倒计时结束后，恢复按钮文字为“获取验证码”并启用，如图4‑68所示。
①选中temp，双击属性面板中的“状态改变时”事件，打开用例编辑器。
②不再添加条件，直接添加“设置文本”动作。
③在右侧的配置动作区域勾选getCode。
④设置文本值为“获取验证码”。
⑤继续添加“启用”动作，启用getCode。
9. 图4‑68
（10）完成，按F5键在浏览器中预览效果，如图4‑69所示。
10. 图4‑69
TIPS：
本案例中，在显示时间时用到了“表达式”。可以这样理解：中括号里面可以直接进行数学运算；中括号外面的的内容直接和中括号里面的内容“拼接”。例如，假设当前seconds的值为5，那么[[seconds-1]]显示的内容为4，[[seconds-1]]s显示的内容为4s。
