使用Axure如何实现获取验证码效果

 时间:2024-10-18 13:42:16

1、第一,在手机外壳中创建如下图的几个组件,此步骤是基础组件的搭建步骤,广大网友可以自行变换没有特殊要求的。

使用Axure如何实现获取验证码效果

2、第二,选中“获取验证码”组件,右击将其顺序置于顶层,如下图,这步操作的目的是因为我们是先看到“获取验证码”按钮然后点击后才会出现倒计时效果。

使用Axure如何实现获取验证码效果

3、第三,单击选中“获取验证码”这个组件,然后双击“鼠标单击时”,如下图。

使用Axure如何实现获取验证码效果

4、第四,上步操作可调出“用例编辑”弹窗,在此弹窗内单击“显示”,然后选中“倒计时文本框”和“重新获取按钮”,将其置于顶层,如下图。

使用Axure如何实现获取验证码效果

5、第五,单击选中“倒计时文本框”,然后双击“文本改变时”如下如图。

使用Axure如何实现获取验证码效果

6、第六,点击“添加条件”根据下图进行填写即可。

使用Axure如何实现获取验证码效果

7、第七,上一步骤编辑完毕后不要退出用例编辑弹窗,新增一个用例:等待1000毫秒,如下图。

使用Axure如何实现获取验证码效果

8、第八,继续从用例编辑弹窗,点击“设置文本”选中“倒计时文本框”新增一个[[This.text-1]]函数,如下图。

使用Axure如何实现获取验证码效果

9、第九,在此选中“倒计时文本框”然后双击“文本改变时”调出用例编辑弹窗,如下图。

使用Axure如何实现获取验证码效果

10、第十,在用例编辑弹窗中点击“添加条件”根据下图进行设置。

使用Axure如何实现获取验证码效果

11、第十一,点击“显示”选中“获取验证码”然后选中“置于顶层”,如下图。

使用Axure如何实现获取验证码效果

12、第十二,点击“设置文本”选中“获取验证码”设置文本为:再次获取验证码,如下图。

使用Axure如何实现获取验证码效果

13、第十三,将“获取验证码”按钮与“重新获取验证码”按钮进行重合如下图。

使用Axure如何实现获取验证码效果
  • 如何利用Axure RP 8设计注册界面
  • Axure制作文字滚动的动态效果
  • axure鼠标经过显示图片效果如何做
  • axure中如何设置鼠标按下时矩形变色效果制作
  • Axure RP8怎样设置限制文本框输入字符位数?
  • 热门搜索
    孝亲敬老手抄报 劳动最光荣手抄报 反对邪教手抄报 汤姆索亚历险记手抄报 手抄报花边 童心向党手抄报 国防教育手抄报 植树节手抄报图片 春节手抄报图片 食品安全手抄报