【知识点43】获取验证码倒计时效果

01 预期效果

点击“获取验证码”按钮，按钮文字设置为“剩余*秒重新发送”，并进行60秒倒计时。倒计时过程中，元件不可操作再次点击。当60秒倒计时结束，按钮文字设置为“获取验证码”，点击后可重新进行验证码获取并进行倒计时。

02 具体操作步骤

（1）在原型文件的画布中，拖入文本标签、文本框、“获取验证码”按钮（名称：button）元件，组成默认展现的原型效果页面。

拖入动态面板元件（名称：circulate），动态面板设置state1、state2两个状态，内容均为空。用以设置循环使用。

（2）点击“获取验证码”按钮，在“交互”功能面板中，打开“交互编辑器”。添加“单击时”事件。点击“设置面板状态”选择circulate动态面板，“STATE”中选择“下一项”，勾选“向后循环”，设置“循环间隔”为“1000毫秒”。

点击“项目-全局变量”，添加“time”全局变量。

点击“获取验证码”按钮，在“单击时”事件中，添加“设置变量值”动作。选择time全局变量，将“变量值”设置为“60”，即从60秒开始进行倒计时。

为达到倒计时过程中，元件不可操作再次点击的效果，增加条件判断。即只有button按钮的元件文字为“获取验证码”时，才可进行上述单击操作。

（3）点击circulate动态面板，在“交互”功能面板中，打开“交互编辑器”。添加“状态改变时”事件。点击“设置变量值”选择time全局变量，点击“fx”，将“值”设置为“[[time-1]]”，即60秒倒计时数字显示。

为使倒计时结束至0秒时，不在进行“-1秒”计算，设置条件判断为全局变量time＞0。即“添加情形”设置为“变量值-time＞值-0”。

同时，设置button按钮的“富文本”为“剩余[[time]]秒重新发送”。

当倒计时结束时，即条件判断time=0时，即“添加情形”设置为“变量值-time==值-0”时，设置button按钮文本为“获取验证码”。

这样即实现了点击“获取验证码”按钮，进行60秒倒计时的效果。

待续~