心情短语收藏本站游戏名字网,专注分享精品网名与头像的专业性网站!
网名推荐: 个性网名 情侣网名 伤感网名 女生网名 男生网名 英文网名
签名推荐: 伤感个性签名 超拽个性签名 情侣个性签名 搞笑个性签名 微信个性签名 英文个性签名
说说推荐: 伤感说说 心情说说 说说带图片 空间说说 空间说说 搞笑说说 爱情说说 自动回复

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

围观: 归属:游戏攻略 时间:2020-03-21 12:40

许多应用程序或网站支持手机号码登录。手机号码的登录肯定会涉及到短信认证的获取。采集过程具有时间有效性,一般默认值为60秒。如果用户在时限内没有收到验证码,他可以再次点击“获取验证码”获取验证码。今天,让我们学习如何使用Axure实现这一效果。

预备

软件:Axure 9.0硬件:视窗/电脑逻辑组合

教程

1。绘制电话号码账户登录页面,如下图256所示+查找一个手机外壳组件库,或者用一个矩形将其设置为标准手机尺寸。创建一个内容页面,如左图所示在手机号码输入框中设置提示文字“请输入手机号码”。在验证码输入框中,设置提示文本“请输入验证码”

2。创建动态面板和设置至少2个状态

动态面板主要用于状态切换时的倒计时效果。简单地说,点击采集后60秒到0秒的文件显示是通过动态面板实现的。让我们在这里留下一点想法。为什么我们要建立至少两个州?

3。添加获取验证码按钮

的交互效果,为获取验证码按钮命名,并在禁用时设置样式。

设置点击互动首先,设置之前建立的动态面板状态,下一个处于切换状态的项目可以每隔一段时间向后循环。确保获得验证后等待时间发生变化(动态面板的名称以前被命名为“开关状态”。)

在单击并设置全局变量X时向交互效果添加一个动作并将x的值设置为60

4。当动态面板状态改变时设置交互动作

情况1:当全局变量X的值不等于0时,即当它大于0时,设置X的值一次减一点击后,倒计时60秒,在达到0之前,禁止重复点击以获得验证效果。

情况2:当全局变量x的值等于0时,可以通过再次单击获得验证码。

验证效果

OK最终达到预期效果。当我们输入手机号码并点击获取验证码时,该按钮将被禁用,副本将在倒计时中显示。当倒计时为0时,按钮变为启用状态

结论

是同一个句子,我希望你能考虑一下为了完成倒计时效果,除了我向你解释的方法,还有其他方法吗?

Axure作为产品经理的必备工具,不仅帮助我们实现互动效果,还需要学习如何实现效果。我希望每个人都能在我的文章中找到自己的进步。感谢收看由@ Blue Tide发布的《

》。每个人都是产品经理。未经许可,根据CC0协议

, Unsplash禁止重印

张图片