如何使用Axure制作动态时间

制作动态面板

在工作区拖入一个文本标签，右键单击，选择“转换为动态面板”，命名为“动态时间”。

有人可能直接从元件库拖入动态面板，这样也可以，但是我还是习惯直接通过右键的方式，这种方式制作的动态面板，不会受到面板区域限制而使某些元件不能显示。

制作动态面板

进入状态1（state1），再拖入一个文本标签，分别将两个文本标签命名为“日期”和“时间”，调整两个标签的位置。

制作动态面板

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

设置自动循环

选中动态面板，添加为“载入时”事件添加用例，选择“设置面板状态”，选中“动态时间”面板，状态为“Next”，勾选“向后循环”，时间为1000毫秒。

这样设置后，面板就会每隔一秒切换一次状态，并且一直在状态1和状态2之间无限循环。

整理时间日期函数

将以下信息整理至Notepad++备用

年：Now.getFullYear()

月：Now.getMonth()

日：Now.getDate()

时：Now.getHours()

分：Now.getMinutes()

秒：Now.getSeconds()

函数解释

日期函数不用解释了，下面解释我们要用到的其他函数。

LVAR.concat('string')：这个函数是在字符串后面附加字符串，这里使用的目的，是在月、日、时、分、秒的前面加上0，后面详解；

LVAR.substr(start,length)：这个函数是从目标字符串的指定位置开始，截取固定长度的字符串，起始位置从0开始；

LVAR.length：取得目标字符串的长度。

实现思路分析

日期的获取和连接并不困难，这里的难点，是在如何将1位文字转换为2位文字，上一步提到的函数是关键。

以秒为例，先在获取到的秒前面加0，比如：010、05

我们最后要保留的是2位数，其实就是最后两位数，但是Axure中没有Right()函数，所以我们只能迂回取得。

1、获取添加0后的长度；

2、用长度减去2，作为截取字符串的起始位置；

3、截取的长度为2。

如：010，从字符串下标为1的位置开始，取两位，结果为10

05，从字符串下标为0的位置开始，取两位，结果为05

这就是我们要的效果

以秒为例写出相应函数：

[[(0.concat(Now.getSeconds())).substr((0.concat(Now.getSeconds())).length-2,2)]]

完善函数

按照秒的函数，我们依次写出月、日、时、分的函数，并进行组合，分别得到“日期”和“时间”的函数。

选中“动态时间面板”，为“状态改变时”事件添加用例，点击“设置文本”，勾选两个“日期”元件，填入日期函数，勾选两个“时间”元件，填入时间函数。

步骤阅读

预览

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

axure10授权码无需看时间，但在授权后可以显示当前时间。

1、打开软件，在元件库选择“二级标题”元件，并拖入画布中。

2、选择中元素，在右上角找到“属性”，点击更多事件，在下拉框中选择“页面载入时”。

3、在d出的对话框中依次选择“设置文本”、“选择当前文件”、并点击设置文本属性中的图标，点击图标后会d出编辑文本页面。

4、在d出的编辑文本页面中，删除文本框中所有文字，然后点击“插入变量函数”先在下拉框中选择“toLocaleDateString”日期函数，然后在次点击“插入变量函数”在下拉框中选择“toLocaleTimeString”时间函数。最后点击确定。

5、最后保存文件，点击预览。

大神文章其实可以再详细点！差点死在添加的最后两步，研究半天才成功 这里详细说下，说不定对其他人可以有用。

添加部件的动态设置中，选择了中继器/数据集/新增行，设置新增行时会d出一个设置窗，

d出窗口中，直接点fx位置进入另一个窗口，

先设置局部变量，如设置名字、赋值等；局部变量设置完成后再设置全局变量，直接选定刚才设置的局部变量名 字（如LAVR_name），确定后，上一个窗口的变量名字就会变为[[LAVR_name]]，并且设置该变量的函数。

需要注意的是:

image局部变量设置时，是赋值“选中状态值”，后面选择中继器中的的图片（我没有导入图片）；

status局部变量设置时，是“选中项文字”，后面选择下拉列表（也只有一个下拉列表）

其他的是赋值“元件文字”，然后选择对应的单行文本框（根据命名）

最后确定第一个d窗完成新增行设置，点击确定动态的用例；预览中点击添加按钮，即出现预期效果。

---