如何用Axure设计锤子手机的秒表计时器

和模拟数字时钟同样的场景，秒表计数器是另外一个类似实现方式，只是我们不是取的系统时间，而是自己从0开始计时，并且要处理秒钟到分钟的换算。

这个例子里主要就是实现对变量的控制，以及如何处理事件，相关知识点如下：

1. 定义全局变量，实现对变量的计算控制
2. 通过组件的显示/隐藏事件来实现循环处理
3. 对事件分支的处理，对数字的秒钟到分钟的转换。

OK，现在开始。

添加形状

设置背景色为黑色，文字颜色为绿色，并将它转换成动态面板，模拟计时器的场景

添加全局变量

其中hours、minutes、seconds、msec是用来保存格式化的时间字符串的，而nHours、nMinutes、nSeconds、nMsec则是用来计算时间，并换算的

添加控制组件

添加几个形状，分别用来控制时、分、秒、毫秒，以及用来控制总体显示的all

添加事件

添加动态面板的载入事件处理，先隐藏所有的控制组件，这样会先触发各个控制组件的隐藏事件，开始显示处理

在分、秒、毫秒组件上添加事件支持（这里没增加对小时的处理了，方法类似），我们以秒钟组件上的事件为例，其它的请下载源文件后查看。

1. 在小10秒时，为了格式化时间显示，在字符串前补了个0
2. 在等于59秒时，分钟开始需要加1了，秒钟重置为0
3. 等待1000毫秒，即1秒钟
4. 隐藏当前组件，这样会触屏隐藏事件，转到隐藏事件处理上

注意： 隐藏事件和显示事件基本相同，除了将隐藏组件改为显示组件外

看一下all组件上的事件，它只负责用来显示完整的格式化时间，通过变量如下拼接显示：

[[minutes]]:[[seconds]]:[[msec]]

按下F5键，在本地运行一下看看效果。

点击这里查看在线显示哦。 （里面有源文件可下载）

 

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ，未经许可，禁止转载。