图文详解-如何用Axure做一个倒计时功能按钮

本篇主要给大家讲一下如何用Axure巧妙简单的实现一个倒计时功能。

demo地址: http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd

需要更详细学习的同学可以看下面文章。偷懒的同学可以直接在demo里复制出想要的部分即可使用了。

1、把主要元素进行排版设计;

这里每个人有每个人的习惯,没有一个标准,只是将主要元素进行组织后加以排版。大家发现并没有获取验证码按钮,这是我们的关键。下一步开始进行添加

2、添加一个Dynamic Panel(动态面板)命名为getCode到验证码输入框后面的位置。并为这个验证码设置三个states分别为get,wait,again代表按钮三个状态:获取验证码,等待,重新获取。如图

3、编辑getCode面板的get和again状态里的元素,为起添加一个按钮,内容分别为:“获取验证码”、“重新获取”,这两个按钮分别命名为getButton,againButton;

4、为getCode面板的wait添加一个Rectangle并设置背景为灰色,文字填充为“秒”,然后添加一个textfield。设置name为seconds,文字颜色为白色,背景色与与rectangle一样为灰色。如图

5、为getCode的Dynamic Panel的get状态下的按钮添加事件,如图

先将state设置为wait状态,等待一秒钟后,将wait状态里的seconds的text设置为59;

6、设置getCodeDynamic Panel里的wait状态下的seconds,为其添加onTextChange的第一个case1,先等待1秒钟,然后进行递减设置。如图:

点击进入编辑Function界面

先进行本地化变量设置,second为当前text的值

为seconds设置function。上图,将second变量引入进来。

编辑Function为secon-1.如上图。

7、因为只有当second大于0时进行倒计时。因此我们需要再为上述的case1添加一个条件约束,如图

8、为seconds添加一个当倒计时完成后的case,如下图

9、为getCode的Dynamic的“重新获取”按钮添加事件,如图:

完成上述操作后,试运行一下吧。一个简单的倒计时功能就完成了。网上也有其他的实现方式。但是我更新换这种做法,因为可复制性更强一些,需要用到此功能的地方。只需要将这个动态面板直接复制或者生成组件即可了。

demo地址: http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd

时间: 2024-10-23 16:47:11

图文详解-如何用Axure做一个倒计时功能按钮的相关文章

[Swift] 如何用Swift做一个不错的按钮变换动画

汉堡按钮在 UI 设计中早已不是什么新鲜玩意儿了,但是某天我突然在 dribbble 上看到了这个酷炫的动画效果,效果真是棒棒哒!于是我决定把它在代码里实现一下. 先来看下 CreativeDash 团队做出来的原始动画效果: 我们可以看到 (看得我眼睛都花了),汉堡按钮 (也就是三条横线的那个)的上下两条线分别绕着自身最优的端点旋转了45°,变成了按钮里的 X ,中间的那个线则摇身一变,成了外面的圈圈.这个效果可以用 CAShapeLayer 实现,但是首先,我需要为这三条直线分别创建一个 C

Android中Canvas绘图之Shader使用图文详解

概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什么呢?做过GPU绘图的同学应该都知道这个词汇,Shader就是着色器的意思.我们可以这样理解,Canvas中的各种drawXXX方法定义了图形的形状,画笔中的Shader则定义了图形的着色.外观,二者结合到一起就决定了最终Canvas绘制的被色彩填充的图形的样子. 类android.graphics

spring中quatz的多定时任务配置图文详解

近来公司让用quatz框架做定时功能,而且还是执行多定时任务,真是苦恼. 虽然从网上搜了很多资料,但是写法上不太尽如人意,最后还是请教了螃蟹大神,给的配置建议就是简单啊,现在拿来分享下: 这里我们需要的有两部分,一个是java中的处理类,一个是quatz的配置文件,截图如下applicationContext_quartz.xmlquatz的配置文件地址地址:http://www.itxxz.com/a/kuangjia/kuangjiashili/2014/0602/10.html java中

【图文详解】scrapy安装与真的快速上手——爬取豆瓣9分榜单

写在开头 现在scrapy的安装教程都明显过时了,随便一搜都是要你安装一大堆的依赖,什么装python(如果别人连python都没装,为什么要学scrapy-.)wisted, zope interface,pywin32---现在scrapy的安装真的很简单的好不好! 代码我放github上了,可以参考: https://github.com/hk029/doubanbook 为什么要用scrapy 我之前讲过了requests,也用它做了点东西,([图文详解]python爬虫实战--5分钟做

图文详解Unity3D中Material的Tiling和Offset是怎么回事

图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔靴搔痒. 下面用*.3ds文件作为模型,介绍Tiling和Offset到底是怎么回事. 3DS格式解析 比如我有这样一个tank_player.3ds模型.右侧的'select'处的图片就是贴图. *.3ds文件最基本的内容包括顶点列表Vertices.贴图坐标列表UVs.面列表Faces.其中Ve

LVS-DR工作原理图文详解

为了阐述方便,我根据官方原理图另外制作了一幅图,如下图所示:VS/DR的体系结构: 我将结合这幅原理图及具体的实例来讲解一下LVS-DR的原理,包括数据包.数据帧的走向和转换过程. 官方的原理说明:Director接收用户的请求,然后根据负载均衡算法选取一台realserver,将包转发过去,最后由realserver直接回复给用户. 实例场景设备清单: 说明:我这里为了方便,client是与vip同一网段的机器.如果是外部的用户访问,将client替换成gateway即可,因为IP包头是不变的

Python安装、配置图文详解

原文地址:http://weixiaolu.iteye.com/blog/1617440 目录: 一. Python简介 二. 安装python 1. 在windows下安装 2. 在Linux下安装 三. 在windows下配置python集成开发环境(IDE) 1. 在Eclipse中安装PyDev插件 2. 配置Python Interpreters 四. 创建Python Project 五. 编写HelloWorld 六. 小结 一. Python简介: Python在Linux.wi

android Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)

在Android群里,经常会有人问我,Android Log是怎么用的,今天我就把从网上以及SDK里东拼西凑过来,让大家先一睹为快,希望对大家入门Android Log有一定的帮助. android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, WARN,ERROR. 1.Log.v 的调试颜色为黑色的,任何消息都会输出,这里的v代表verbose啰嗦的意思,平时

Android中级教程之----Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)

在Android群里,经常会有人问我,Android Log是怎么用的,今天我就把从网上以及SDK里东拼西凑过来,让大家先一睹为快,希望对大家入门Android Log有一定的帮助. android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, WARN,ERROR. 1.Log.v 的调试颜色为黑色的,任何消息都会输出,这里的v代表verbose啰嗦的意思,平时