Axure RP(七)案例(发送验证码)

  1. 制作登录页面,给发送验证码按钮命名“发送验证码”在这里插入图片描述
  2. 拖拽一个动态面板放在手机外边,再新建一个状态,总共两个状态而且两个状态不需要添加任何内容。
    在这里插入图片描述
  3. 设置动态面板轮询,两个空的状态不停循环。在这里插入图片描述
  4. 为动态面板添加“状态改变时”事件,当状态改变时修改“发送验证”为剩余多少秒。这里需要定义一个全局变量表示剩余的秒数,设置一个默认值60秒。为了演示这里设置75秒。在这里插入图片描述
    当动态面板状态发生改变时需要将按钮的文本显示剩余多少秒,并且计算下一次全局变量的值。
    在这里插入图片描述
  5. 如果数秒等于0时就不能继续往下数了,所以数秒时要增加条件。在这里插入图片描述
  6. 如果全局变量等于0时按钮的文本应该改成原来的“发送验证码”。注意这里的分支是else if。
    在这里插入图片描述
  7. 当数秒结束时应该重新初始化一下全局变量的值。以便于下次还能继续发送验证码。在这里插入图片描述
  8. 当数秒时按钮应该是禁用的不允许点击的。设置一下禁用样式填充色为灰色。在这里插入图片描述在这里插入图片描述
  9. 当数秒结束后禁用后的状态应该改为启用。在这里插入图片描述
  10. 示例效果 在这里插入图片描述

此示例最大的特点就是事件循环,利用动态面板的两个空状态循环切换,当状态每次切换时去执行动作,这就是事件循环或者是定时器功能。因动态面板不是用来展示内容的而是用来一直循环空转下去的所以动态面板的状态不需要添加任何内容。因为动态面板至少有两个状态才能循环。