使用Axure动态显示系统时间

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即可看到效果。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容