如何使用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预览效果。

最近学习Axure的使用，学到制作自己的元件，又恰好客户制作的原型中需要用到日历，就想到自己制作一个动态变化的日历表，添加到“我的原件”中，于是，我就开始了研究。。。

首先看一下效果：第一张图为界面原始效果，第二张图为点击箭头之后的变化图。

首先我们得知道客户使用日历的先后顺序：显示日历——选择年份月份——选择日期

第一步：显示日历

显示内容：当前年份月份，以及日期。年份月份都很好知道，通过电脑系统即可知道当前年份和月份，方法：获取年份，[[Now.getFullYear()]]；获取月份，[[Now.getMonth()]]；

显示日期就比较麻烦了，要确定每月第一天是星期几，确保每一个单元格内容正确显示，经过多次尝试最终得出正确打开方式：

计算每月第一天：

蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1；w：星期；c：世纪-1；y：年（两位数）；m：月（m大于等于3，小于等于14，即在 蔡勒公式 中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)

蔡勒公式得出的结果除以7 取余，余数即为每月第一天对应的是星期几，如：2017年09月第一天为星期五。

需要注意的是：蔡勒公式计算中  取整  问题，Axure  里面没有取整计算方式，所以我一开始使用的是  [[LVAR.toFixed(0)]]，这个方法是保留0位小数，在一开始的设计中，九月份能正常显示，但是十月份第一天就往后推一天（本来是周日，变成周一），后来查资料发现这个公式有四舍五入的效果，而恰好在蔡勒公式中的  [26(m+1)/10]  在十月份的时候是28.6，那么在最终结果上就多出“1”，所以十月份第一天就往后推了一天；问题找到，解决问题：将  [[LVAR.toFixed(0)]]  替换为  [[LVAR.split('.',1)]]。该函数意为：将字符串以“.”分割为1个字符串数组，成功解决问题。

在单元格中正确显示日期：将每个单元格设置名称，从第一个个开始设置为1，第二个设置为2，第三个设置为3，第四个。。。，以此类推，将所有单元格设置名称（星期所在单元格除外）。给每个单元格赋值：[[This.name-MinuendNumber]]，This指的是当前单元格；

完成以上内容基本上可以实现日历显示，只不过我们还需注意各个事件的先后顺序，以及事件的执行时机，进过诸多尝试得出如下执行顺序：显示年份月份的控件：执行    载入时   获取年份月份，获取蔡勒公式中需要的C和Y，并对控件赋值。执行   文本改变时   给月份赋值，同时将日历表显示。

说明：X对应的是蔡勒公式中的年份，Y对应的是蔡勒公式中的世纪数（世纪数不需要减一）。Z对应的是月份数。

日历表：执行  显示时   ，判断月份，根据月份设置月份天数，计算月份第一天的星期数，改变所有单元格的选中状态；

单元格：执行  选中改变时  根据 [[This.name-MinuendNumber]] 结果来判断单元格赋值情况，执行   鼠标单击时  给某一控件赋值。这个就很随意了，直接将单元格内容赋值到某一控件。

第二步：改变年份和月份

这一步是整个日历表最重要的一部分，他是实现日历表动态变化的关键。仅以左侧箭头来说明问题：执行   鼠标单击时  事件：根据月份来判断年份和月份的增减，给显示年月的控件重新赋值，日历表隐藏，日历表显示；

说明：左侧箭头“减”：Case1：月份等于1时，年份减少，月份为12月；Case2：月份大于1时改变月份。

到这，一个完整的日历表就完成了，下面给一个事件执行顺序图，以帮助大家的理解。

另外，需要注意的是单元格点击事件需要作出判断，单元格内容为空的时候作出合理的 *** 作。

实际上在大多数的原型设计中不需要这么复杂的功能设计，只需要展示即可，单复杂的设计有助我们去理解Axure中事件执行的先后顺序，函数的功能等等，所以没事的时候不妨自己设计几个比较好玩的控件也是不错的！

但是有些情况，因为中文计算机环境的关系，使得我们想要表达呈现在Prototype上的文字无法顺利显示出来。最近有使用者反应，某些特殊中文字或符号，可以输入在Axure RP的wireframe上，但是当输出成HTML Prototype时，在浏览器上却看不到。究竟是哪些中文字或特殊符号有影响呢?比如：陶喆的「喆」，胜肽的「肽」，表示Copyright的 (c)，Trademark的(tm)，Registered Trademark的(R)。在HTML语法中：如果要呈现出 TM (trademark)符号 ，要使用 『&#0153』 (中间无空格)，或Unicode 『&#8482』(中间无空格)。要呈现出 Copyright符号�0�8，要使用』&#0169』(中间无空格)； 要呈现 Registered Trademark符号�0�3，则要使用』&#0174』(中间无空格)。直接在Axure RP输入』&#0153』，输出成Prototype时，并不会呈现出正确的trademark符号。这时候，我们必须藉助Microsoft Word的协助。步骤一，先将你想呈现的特殊中文字及符号，先在Word里头打好。步骤二，在Axure RP的画布中，放置一个Text Panel对象。

---