axure版本:8.0
实现效果:
原型查看:
https://wwimp7.axshare.com/#c=2
实现思路:
通过设置文本事件调用axure自带函数获取当前系统时间,然后通过动态面板来实现时间的刷新。
制作步骤:
1、新建一个文本标签,任意输入一些内容,设置好文本的格式。
2、在该文本框上点击右键,“转换为动态面板”。
3、在右侧《大纲:页面》视图中,可以看到新生成的动态面板。在该动态面板的“State1”这个状态上点击“复制状态”。
4、然后左键点击该动态面板,在属性中,点击“载入时”,设置控件载入事件。
5、在弹出的事件设置界面,动作添加“设置面板状态”,勾选“当前元件”,将状态设置为“Next”,勾选“向后循环”和“循环间隔”,为循环间隔设置一个值,默认为1000毫秒,也就是每1秒钟切换一次状态,可根据需要改成其他合适的值。
6、类似于上一步的操作,为该动态面板添加一个“状态改变时”的事件,动作添加“设置文本”,分别勾选该动态面板下的两个文本框,设置的值为fx函数的值,在函数值中输入
[[Now.toISOString().substring(0,10)]] [[0.concat(Now.getHours()).slice(-2)]][[Now.toISOString().substr(13,6)]]
(注:两个文本框得分别选中,并分别设置文本的值。[[Now]]即代表当前时间,但其时间格式不是我们想要的,上图的函数值是获取yyyy-MM-dd HH:mm:ss格式的时间值)
设置好后,页面如下图,此时点击预览或生成html即可看到效果。