【Axure RP9基础】CSDN登录框（二）之验证码倒计时

需求：

先来看一下我们对点击验证码的需求：

手机号为空，提示：手机号不能为空！
手机号格式不正确，提示：手机号码格式不正确
手机号输入11位数字，“获取验证码”进入60s倒计时，倒计时结束后回到“获取验证码”状态，为了演示效果，我将60s调整至5s
最终效果 如下图：

获取验证码的交互设置如下图：

步骤1：准备元件

将对应的下拉框、矩形调整形状、位置、颜色、提示语放至对应位置，本文重点讲获取验证码的交互，这些常规的就不截动图演示了。（手机号的矩形输入框 输入类型 选搜索（如下图），我这里为了效果数据框做个组合，分为外框和输入框，输入框做了获取焦点的交互）

步骤2：设置全局变量

点击 项目->全局变量 设置全局变量countdown，默认值给60，我这里为了演示效果给的5。（全局变量用作设置验证码倒计时）

步骤3：手机号不能为空

单击 “获取验证码” 启动情景，设置情景1：手机号不能为空 条件设置 元件文字长度 手机号输入框 == 值 0时，点击“确定”保存情景，并为该情景设置交互：在此情景下，显示报错：手机号不能为空！（需提前拖动元件 文本标签 到画布中显示报错的位置，编辑文字 手机号不能不空！ 给此文本标签元件命名，并将此文本标签设置为隐藏）

步骤4：手机格式不正确

继续给 获取验证码 单击设置情景2：手机格式不正确，我们给手机号不正确一个简单的定义，当输入数字长度不等于11且不等于0时，（因为等于0报错：手机号不能为空！ 了），那么条件设置 元件文字长度手机号输入框！= 值 11，点击 + 继续添加 元件文字长度手机号输入框！= 值 0时（注意页面右上角为 匹配所有 时为且；匹配任何 时为或，我们这里用到的是且）点击“确定”保存情景，并为该情景设置交互：在此情景下，显示报错：手机格式不正确（需提前拖动元件 文本标签 到画布中显示报错的位置，编辑文字 手机格式不正确 给此文本标签元件命名，并将此文本标签设置为隐藏）

步骤5：倒计时

继续给 获取验证码 单击设置情景3：条件设置 元件文字长度手机号输入框 == 值 11，点击 + 继续添加 值 countdown >= 值 0时（countdown为我们最初设置的全局变量）点击“确定”保存情景，并为该情景设置交互：在此情景下，设置目标 获取验证码 设置为文本值，此时点击右侧fx选择全局变量 countdown，并在后面加上s。
因为读秒字数少位置会迁移，所以我们需要移动一下文本位置，继续添加交互 移动获取验证码到达 330，73（这个位置需要自己找一下）
为了实现倒数，继续添加交互 等待 1000ms
继续添加交互 设置变量值 countdown 为 [[countdown-1]]
继续添加交互 触发事件获取验证码单击

步骤6：倒计时结束

读秒结束后会变回获取验证码状态，所以我们继续给 获取验证码 单击设置情景4：条件设置 元件文字长度手机号输入框 == 值 11，点击 + 继续添加 值 countdown < 值 0时，设置文本 当前为获取验证码
继续设置变量值countdown 为5
继续设置移动当前到达 283,73 （此步骤为了将刚才倒计时挪动的位置挪回原位）

步骤7：效果

此时可以点击预览查看最终效果：
1.手机号为空时，单击验证码报错：手机号不能为空！
2.手机号不等于11位且不等于空时，单击验证码报错：手机号格式不正确
3.输入11位手机号，单击验证码进入读秒倒计时，倒计时到达0后，变回获取验证码字样