发送验证码，倒计时重新发送的案例教程

　　“发送验证码，倒计时重新发送”，这个功能在产品中非常常见，本篇文章笔者将会以两种方法来展示如何实现这个功能，enjoy
　　一、案例目标
　　今天这个教程中，我会用2种方法实现这个功能原型，主要涉及到“全局变量的使用”，先看一下原型样式：
　　您也可以在线预览交互效果：点击预览
　　二、案例教程
　　第一种实现方法
　　使用“动态面板”的切换，来达到倒计时的效果；
　　所需元件：
　　2个输入框、1个发送验证码的按钮、1个登录按钮、1个动态面板（命名为“循环面板”）
　　制作步骤：
　　1。先拖一个文本框，调整好宽、高、圆角，边框颜色；
　　2。点击“交互”新建交互在“交互样式”中选“获取焦点时”，设置文本框获取焦点时的样式；同理设置“提示文字”
　　3。选中文本框，右击可以设置“输入类型”、“编辑输入最大长度”；
　　4。以此设置好元件的静态样式。
　　进入交互设置：
　　1。由于时间是一个变量，并且需要做实时改变，所以先设置一个全局变量X，并设置初始值为30；
　　2。发送验证码按钮的交互事件设置
　　只有按钮“发送验证码”文字为“发送验证码”的时候，才可以点击，所以我们在给按钮设置“单击时”交互事件的时候，需要先添加一个条件；
　　设置面板状态为“往后循环”；
　　为了能够每次点击时，X的值都为30，所以设置变量值为30；
　　3。循环面板的交互设置
　　首先，当面板开始改变的时候，去设置“发送验证码”按钮的文本为“剩余〔〔X〕〕秒”；
　　为了使时间每次都减去1，所以还要设置变量值X为〔〔X1〕〕；
　　为了使倒计时为“0”的时候，出现发送验证码，所以设置两个条件，值X0，值x0时，就设置文本为“发送验证码”；
　　实现逻辑：
　　1。单击“发送验证码”：
　　设置“循环面板”每秒钟切换一次状态；
　　2。“循环面板”状态改变时：
　　设置“发送验证码”文本变为“剩余X秒”；当剩余0秒时，可以重新发送
　　第二种实现方法
　　使用“等待”事件，来达到倒计时的效果；
　　所需元件：
　　2个输入框、1个发送验证码的按钮、1个登录按钮；
　　制作步骤：
　　静态元件同方法一；
　　直接进入交互设置
　　首先，设置一个全局变量X；初始值为30；
　　设置“单击事件”，先判断条件X0时，去设置“发送验证码”按钮的文本为“剩余〔〔X〕〕秒”；
　　为了使时间每次都减去1，所以在等待1秒后，将变量值X设为〔〔X1〕〕；
　　触发“单击事件”，让设置文本为“剩余〔〔X〕〕秒，然后等待1秒钟，循环多次”；
　　其次，当条件X0时，就需要设置文本为“发送验证码”，终止单击事件循环。
　　实现逻辑：
　　单击“发送验证码”：
　　设置“发送验证码”文本变为“剩余X秒”；
　　等待1秒，然后再设置X为〔〔X1〕〕，然后再触发“单击事件”
　　相当于重复循环改变X值，直到0；
　　当剩余0秒时，可以重新发送