编辑指南:本文与大家分享如何使用Axure实现短信验证码的倒计时效果。作者对预习图、所需的基础原创、操作步骤逐一进行分析，并介绍了过程中需要注意的问题，希望对你有所启发。

这是一个新的用户注册交互，使用验证码倒计时。本文仅说明验证码倒计时功能，不判断用户名是否完整，如下图:

图1

动态面板来回切换的状态是隐藏的。为了减少验证码的秒数，如下图2所示:

图2

01基本组件

1.文本标签*2

2.动态面板* 1(两种状态命名为圆；矩形)

3.倒计时按钮*1

思考:

1.使用函数[[Math.random()]]、[[Math.exp()]]和[[substring(from，to)]]实现验证码倒计时

[[Math.random()]]这个函数会随机取一个0到1之间的数字，具体取几个小数点，网上没有说明。我试图得到15到18之间的位数，效果不大；

[[Math.exp(x)]]是用于获得数值的指标，例如[[Math.exp(2)]:表示e的二次幂的数值；

[[substring(from，to)]为截止字符串，例如[[V.substring(2，7)]，其中v = 2343242342:表示截取值为432423；

这里将详细说明随机生成的6位验证码，稍后将忽略该功能

这里验证码是由以上三个函数生成的。可能还有更简单的方法。之前试过两个功能，但是总会有bug。因为[[Math.random()]]函数可能很小，比如:0.0000211，验证码生成不是六位，所以做了很多尝试。最后，为了生成100%随机的6位数，使用了三种函数组合:[[(数学。Exp(数学。Random ()) * 100000)。Substring (1，7)]，意思是:随机取一个数值指数函数* 100000，然后截取数值的第1到第7位数字。这里乘以1，000，000就是去掉小数点；

2.点击验证码后，应显示倒计时。这里的倒计时应该是用动态面板来回转换显示秒，如上图2所示；

02详细添加交互(只说明验证码的倒计时功能，不判断用户名是否完整)

1.添加按钮并修改名称:验证码(设置交互样式:禁用时-灰色填充)

2.拖动2个文本标签(一个名称:显示文本；另一个名称:s(设置为隐藏)

3.添加动态面板(名称:简单验证码)

4、验证码添加动作：单击时-设置变量值-禁用-等待-显示-设置文本，如下图：4.验证码添加动作:点击-设置变量值-禁用-等待-显示-设置文本，如下图:

4.1设置变量值(这是一个全局变量，具有根据需要改变验证码倒计时时间的优点)

4.2在设置面板状态下(下一项-向后循环-循环间隔1000秒(为了实现验证码值的递减))

4.3当验证码被禁用时-等待1000秒-显示秒(此处隐藏一个文本，秒)

4.4设置文本

就是前面提到的函数[[(数学。exp(数学。random ()) * 100000)。子串(1，7)]]

03动态面板添加动作

这里不解释动态面板的动作，以便判断是否停止循环。