【axure分享】利用文本框处理倒计时效果

在原型制作中经常会遇到倒计时，特别是在用户注册-短信验证环节，我们来看个demo（请忽略它的颜值）：

1. 短信验证的三种状态：
   1. 首次获取短信验证码；
   2. 倒计时（两次短信发送间隔）；
   3. 再次获取短信验证码（2与3循环）。
2. 设置“获取短信验证码（矩形或者button都ok）”与“再次发送验证码（置灰读秒）”两个动态面板，当然你也可以把他们都作为同一动态面板下的不同状态来使用；
   
   
3. 倒计时添加：利用“获取短信验证码”触发首次变化+文本框的“文字改变时”的这一交互来实现倒计时，具体为：
   1. 隐藏边框+透明文本框作为倒计时效果的核心部件，添加两个用例：
      • 用例1：部件文字≥0时，部件文字延时1s递减；
      • 用例2：部件文字=0时，设置“获取短信验证码”动态面板显示，同时该面板文字设置为；“再次获取短信验证码”。
        
        
   2. 强调一点：读秒效果需要定义局部变量，然后设置文本为定义好的变量-1；
      
   3. 首次获取验证码：“获取短信验证码”动态面板设置部件文字（读秒）=59（我设置的60s重发短信验证码），这样可以触发读秒循环（等待1000ms-1）；
4. 再次获取验证码：执行用例2即可，if读秒部件文字=0，“获取短信验证码”动态面板文字设置为：“再次获取验证码”。
   

   ---

   打完手工！希望对大家有所帮助：）

   核心：文本框的“文字变化时”交互逻辑的使用，实现-1循环（如果使用其他元件，需要复制粘帖n遍“等待1000ms,定义部件文字-1”）