养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何使用Axure制作动态时间

时间:2024-11-02 01:36:21

Axure中可以获取当前的时间日期,蒎被眯馄但是是静态的,如何做到能实时显示变化的呢?首先想到的是动态面板,可以利用动态面板的切换状态和循环进行制作。还有一个问题,获取到的时间,比如谥貘揉蹿秒,如果只有一位数字,如何在前面加上0呢?也许你会想到可以给事件添加条件,如果是一位则添加0,如果不是则不作处理。这不失为一种处理方式,但是还涉及到时、分、月、日,如果全用判断的话,我想你是受不了的。本经验将介绍如何通过Axure的函数来解决这一问题。

如何使用Axure制作动态时间

工具/原料

AxureRPPRO7.0

Notepad++或其他你熟悉的文字编辑工具

方法/步骤

1、制作动态面板在工作区拖入一个文本标签,右键单击,选择“转换为动态面板”,命名为“动态时间”。有人可能直接从元件库拖入动态面板,这样也可以,但是我还是习惯直接通过右键的方式,这种方式制作的动态面板,不会受到面板区域限制而使某些元件不能显示。

如何使用Axure制作动态时间

2、制作动态面板进入状态1(state1),再拖入一个文本标签,分别将两个文本标签命名为“日期”和“时间”,调整两个标签的位置。

如何使用Axure制作动态时间

3、制作动态面板关闭状态,返回index页。在“元件管理”面板右键单击state1,选择复制状态,新状态为state2,不用修改两个状态的名称,因为不重要。

如何使用Axure制作动态时间

4、设置自动循环选中动态面板,添加为“载入时”事件添加用例,选择“设置面板状态”,选中“动态时间”面板,状态为“Next”,勾选“向后循环”,时间为1000毫秒。这样设置后,面板就会每隔一秒切换一次状态,并且一直在状态1和状态2之间无限循环。

如何使用Axure制作动态时间

5、整理时间日期函数将以下信息整理至Notepad++备用年:Now.getFullYear()月:Now.getMonth()日:Now.getDate()时:Now.getHours()分:Now.getMinutes()秒:Now.getSeconds()

如何使用Axure制作动态时间

6、函数解释日期函数不用解释了,蛴蛩钔淞下面解释我们要用到的其他函数。LVAR.concat('string'):这邗锒凳审个函数是在字符串后面附加字符串,这里使用的目的,是在月、日、时、分、秒的前面加上0,后面详解;LVAR.substr(start,length):这个函数是从目标字符串的指定位置开始,截取固定长度的字符串,起始位置从0开始;LVAR.length:取得目标字符串的长度。

如何使用Axure制作动态时间

7、实现思路分析日期的获取和连接并不困难,这里的难点,是在如何将1溴腻男替位文字转换为2位文字,上一步提到的函数是关键。以秒为例,先在获取到的秒前面加0,比如:005我们最后要保留的是2位数,其搏皋咬夼实就是最后两位数,但是Axure中没有Right()函数,所以我们只能迂回取得。获取添加0后的长度;用长度减去2,作为截取字符串的起始位置;截取的长度为2。如:010,从字符串下标为1的位置开始,取两位,结果为1005,从字符串下标为0的位置开始,取两位,结果为05这就是我们要的效果以秒为例写出相应函数:[[(0.concat(Now.getSeconds())).substr((0.concat(Now.getSeconds())).length-2,2)]]

如何使用Axure制作动态时间

8、完善函数按照秒的函数,我们依次写出月、日、时、分的函数,并进行组合,分别得到“日期”和“时间”的函数。选中“动态时间面板”,为“状态改变时”事件添加用例,点击“设置文本”,勾选两个“日期”元件,填入日期函数,勾选两个“时间”元件,填入时间函数。

如何使用Axure制作动态时间

9、预览完成以上一系列设置后,按F5预览效果。

如何使用Axure制作动态时间

如何使用Axure制作动态时间

© 一点知识