【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果（上）

介绍：

本案例主要讲解移动端的顶部栏，如何实现时分秒动态变化的效果，类似于电子时钟，要实现该效果有两个关键点：

1. 如何获取当前的时、分、秒
2. 获取时分秒后，如何让时间动起来，达到每秒钟变化一次的效果

要实现上述两个关键点的效果，需要用到Axure的日期函数和动态面板。

预览：

https://www.youzhifang.net/axure/prototype/ZS/ZS0018

涉及知识点：

1、动态面板

• 循环间隔设置
• 向后循环

2、日期函数的使用

• 时：getHours() 获取给定⽇期对象“⼩时”部分数值(0 ~ 23)
• 分：getMinutes() 获取给定⽇期对象“分钟”部分数值(0 ~59)
• 秒：getSeconds() 获取给定⽇期对象“秒数”部分数值(0 ~59)

3、交互动作

• 动态面板-载入时事件
• 动态面板-状态改变时事件
• 设置文本动作

重点步骤：

1、将显示时间的文本命名为“时分秒”（用于查找）

2、拖入动态面板到画布中，命名为“辅助实现时间实时变化”

3、为“辅助实现时间实时变化”动态面板增加一个子面板，只用添加即可，不用做其他操作

4、为“辅助实现时间实时变化”动态面板，设置交互：载入时-设置面板状态，选择“辅助实现时间实时变化”动态面板

5、设置状态为【下一项】，勾选【向后循环】，在更多选项中勾选【循环间隔】并取消勾选【首个状态延迟1000毫秒后切换】。

此步骤设置完毕之后，就可以得到每隔1秒变化一次的效果。

实现的原理是：借助动态面板的两个子面板，每隔1秒自动切换到下一个面板，反复切换来实现动态变化

接下来是获取当前的时分秒

6、选中“辅助实现时间实时变化”动态面板，设置交互：状态改变时-设置文本，选择“时分秒”文本

7、点击【fx】编辑文本，插入函数

8、设置文本值为：[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]

设置完毕后预览，即可看到时分秒实时变化的效果了

以上步骤可实现时分秒实时变化的效果，但在显示时，如果时分秒不足两位数，就会出现“9:48:1”这种情况，而实际日常使用大部分会显示“09:48:01”，具体教程可查看

【案例教程】Axure使用函数实现时分秒电子时钟补零效果（下）

相关教程：

【Axure 函数】之时间日期函数概览