位置:首页 > 网站优化 >

Axure教程:获取验证码倒计时的实现

作者: | 发布时间:2019-12-31 17

本文☑∩介绍了如何用Ax╤ure获取验证码倒计Ψ时的实现的操作步骤,希望对你有所帮助。

预览效果

(1)获取验证码:

(2)倒计时:

(3)重新获取:

所↕需元件

一个文本标签并将文字改为“10”,一个矩形转@换为动态面板并增加多一个面板∏。

操作步骤

(1)将“计时”矩形放在“提示”动态面板下面

(2)设置面板1内的矩形文字为“获ω取验证码”

(3)在面板2内放置一块相同大小的矩≠形,并设置矩形内文字为“重新获取”

(4)设置动Γ态面板第一个交互——鼠标单击时

(5)设置动态面板第二个交互——状态改变时(Casōe1↘)

(6)为该交互添加条件

(7)设置动态面板第ж三个交互——≡∈状态改变时(Ca╜se2$)

(8)并为■该交≮≯互添加条∴件

(9)大功告成,接下来按F5↗预览原型即可。

小记

1.这里解释一∝下为什么设置动态面板的第一♤个交互——鼠标单击时,隐藏了动态面板后〣要让动态面板每过1S循环切♂换State1->S↑tate2->State1。这个操作的目的是为了触╭╮发第二、三个交互——状态改变时,因为动态面板切换了,所以状态改变了,那么系统在判断到“计时”仍℅>●“0”时就会自动减1,从10变ψ成9,过Δ1S又从9变8…╠╡;以此@类推,直≥到为0时,下一秒就显示动态面板并显示为●S░Ψtate2,“重新获取”矩形的所在面板。

2.以上就是许多网⿺站和APP都会用到的关于用手机收取验证码时的倒计时д的原型制作啦,学』会这个原型ↅ,那么将来在你自己需要设计网站或APP原型时大概≮率都会用上。(๑•ㅂ÷•)✧太棒了!

 

本文由 @Nilz 原创发布于人人都是产品经理,未▎▏经许√可,禁止转载

题图来自 Unspl〤ash▌ υ,基于 CC0 协议