用 Axure 设计60S倒计时

产品设计 2019-01-12 阅读原文

很多互联网平台,采用手机号注册时,都要获取验证码,如何在原型中做到点击获取验证码按钮,上面会和真实注册一样,出现倒计时?倒计时60S结束后,文案又恢复为获取验证码?

如下图,图一为点击后,图二未点击时文案:

第一步:

设置全局变量,随便用字母命名一个,我用的是S。当页面载入时,设置全局变量的值为60。

第二步:

设置点击交互事件,首先添加一个动态面板,大小不限制,命名为时间计算(随意)。

其次复制一个面板,使之包含两层面板。

然后命名获取验证码按钮名称为“验证码”,点击验证码,设置“时间计算”面板循环向后切换,时间间隔为1000毫秒。

最后当“时间面板”循环时,选择时间面板元件,状态改变时,设置全局变量值为S=[S-1],设置文本于按钮文字 还剩[s]秒重新发送,当S=0时,“时间面板停止循环”再次赋值S=60,按钮文字为获取验证码。

如下图:

完美,收工。

本文由 @胖子 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

人人都是产品经理

责编内容by:人人都是产品经理阅读原文】。感谢您的支持!

您可能感兴趣的

Axure 教程:QQ音乐播放页制作 离上一次发文到现在,已经很久没有写了,趁着这两天心血来潮,临摹一个 QQ 音乐的播放界面,因为个人能力有些不足,在这里还要感谢 Phoenix 老师、牧逸的指导,我才能够把整个效果做完 !!! 本次教程面向于有一定基础的 Ax...
Axure:文字跑马灯效果 日常学习之——跑马灯的效果~希望内容能对大家有帮助。 效果如下图 o(* ̄▽ ̄*)o 思路: 文字元件移动+动画效果,实现滚动的效果; 利用动态面板控制跑马灯文字在规定区域内滚动; 设置文...
软件智库 Axure RP 8 ( 64 位)下载链接: 百度网盘: https://pan.baidu.com/s/1hsfD3Kg 提取密码: ivma 软件简介 : Axure RP 是一个专业...
Axure那些不得不知的知识 Axure是头大象,其实有很多不容易被大家注意到的功能。Axure以高度的自由度著称,用好了绝对是大杀器。本篇讲讲关于Axure的一些冷门小知识。 一、手绘风格的原型 其实Axure也是支持手绘风格的。具体...
Axure 教程:APP购物车交互 在做购物APP时,商品的增加、减少,以及点击增加或者减少时,商品总价的变化,今天这里来讲一下是怎么操作的~ 在开始之前,我们先把购物APP的原型画出来,然后下面讲具体的操作流程(如下图) 一、元件命名 给画...