使用Axure制作电子时钟

一、实现的效果

效果连接：http://ym540p.axshare.com/#p=主页

密码：hanyu2012

二、做前准备

背景图片：一张

软件：Axure

三、制作流程

1、在开打的空页面上添加一个动态面板（X：20，Y：20 ; W：300 ，H : 200），给动态面板命名为“时钟”,如图：

2、将事先准备好的图片添加到动态面板“时钟”的State1界面上，设置位置（X：0，Y：0 ; W：300 ，H : 200），之后再在该图片上添加5个文本控件，如图：

3、分别为图中代表“时”、“分”、“秒”的文本控件命名为“TextHour”、“TextMinute”、“TextSecond”，其中，冒号不做命名处理，如图：

4、由于时钟是要每间隔1秒钟就要变化一次，而且是无限次的更新，所以为了避免刷新界面，我们需要在时钟主界面添加一个辅助动态面板，同时给该动态面板命名为”辅助“，默认为“隐藏”，如图：

5、设置“辅助”的移动时的事件，如图：

6、设置界面加载时事件，如图：

7、制作完成，点击“发布-生成HTML文件”，运行一下测试效果。

运行效果OK！大功告成！