用Axure制作时钟

时钟.png

闲着没事，教大家怎么制作一个时钟吧。这个秒钟是会一秒一秒往上跳，而且会进行分钟，小时的递进。

第一步

1.png

打开Axure，拖曳三个文本部件过来。第一个文本标签命名为'小时'。第二个命名为'分钟'，第三个命名为'秒钟'。

第二步

2.png

在页面交互-页面载入时中，添加三个变量，分别叫做'xiaoshi'‘fenzhong’‘miaozhong'。
这三个变量分别用来存放小时值，分钟值，秒钟值。对了，别忘了给他们定一个默认值。这个默认值会是你刚开始载入页面时的展示时钟，比如11,22,33。

然后我们要做一个大事——将变量值和第一步的文本标签绑定。

![Uploading 4_275996.png . . .]

3.png

左侧动作中的'部件'下，有一个设置文本，这个动作是用来设置文本标签的内容的，我们把第一步命名的三个文本标签，分别设置值为变量xiaoshi,fenzhong,miaozhong。

确认后预览一下

4.png

成这样了，这是因为三个变量的默认值被我设为了11,22,33。

第三步 让秒钟动起来！

怎么样让秒钟动起来呢？让变量'秒钟'每隔1秒+1就可以了！

怎么控制变量每隔一秒+1呢？

5.png

我们拖入两个动态面板。一个叫'gong',一个叫'shou'（不要问我什么意思）。其中gong面板有两个状态。

我们让页面载入'时，就把gong面板的状态更改为Next。

这个步骤就像是推倒多米诺骨牌的第一手，gong面板的'面板状态改变时'事件会被触发。此时先等待1秒钟，然后移动shou面板到相对位置（0，0）。（其实没有移动）如下图：

6.png

虽然shou没有移动，但也会触发'移动时'事件。点击shou面板右侧的交互'移动'，设置变量[[miaozhong]]为[[miaozhong+1]]，别忘了把新的miaozhong值设为文本标签'秒钟'的值。如下图。

7.png

对了，别忘了再推gong一下，将gong面板的状态修改为next。

这时候，gong和shou的交互如下：

8.png

浏览后就能看到秒钟在每隔一秒+1。

但这时候，秒钟是没有限制的，我们需要它调到59后的下一秒，变回0，同时分钟+1。

第四步 让分钟动起来！

我们为shou面板移动时的交互添加如下内容： 如果miaozhong变量=59，则将'miaozhong=0',且‘fenzhong+1’,如下图所示。

显示新增条件：如果miaozhong+59

9.png

更改后，shou面板的交互如下图：

10.png

这时候预览，就能看到明显的时钟效果了，超过60秒，秒钟会归零，同时分钟加1。

你可以用类似的原理为分钟变量也做一下限制，超过60就归零，同时shizhong+1。不过也无所谓，很少有人看原型会看到时钟会变。

孩子们，赶紧试一下吧。