最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

内置函数的应用

教程 小楼一夜听春语 4145浏览

在《局部变量的应》我们一起接触过“fx”的概念。

“fx”本身表示的就是函数,编写一个计算公式也可以看做是自定义的函数。

而在《系统变量的应用》中,我们点击[插入变量或函数]按钮之后,能够打开一个列表。

在出现的列表中,包含了大量的变量与函数。

简单来说,在变量与函数列表中,所有带小括号的都是函数。

在Axure RP中函数共有4类:数字函数、数学函数、字符串函数、日期时间函数。

下面,我们通过一个案例来了解函数的使用方法。

在Axure RP 9的Sample UI Patterns元件库中,有一个时间选择器元件。

这个元件交互比较复杂,我们只完成其中的一部分。

这一部分就是,页面打开时,文本框中显示当前的系统时间。

先来准备元件。

画布中放入一个文本框元件,命名为“时间输入”,宽度“160”像素,高度“40”像素,圆角“5”像素,边距均为“10”像素。

默认文字可以输入“0 : 00 AM”,不输入也没关系。

然后,再放入一个时钟图标。

在软件自带的“Icons”元件库中搜索“时钟”即可找到。

接下来,我们为“时间输入”文本框添加[载入时]的交互,为当前元件[设置文本]。

文本的值就是获取系统的小时与分钟数值后,按照默认文字的格式排版。

这里的关键点就是如何获取系统时间。

在变量与函数列表中,[日期时间]的分类中,所看到的第一个内容是“Now”。

下方还有“getHours()”与“getMinutes()”。

“Now”能够获取系统时间,但是它是一个对象,不能直接得到小时与分钟的数值。

而是需要通过“Now”这个对象,调用“getHours()”函数与“getMinutes()”函数进行获取。

所以,函数的使用方法非常简单,就是用一个对象调用它的函数,也就是“对象.函数”。

此时,在浏览器中查看原型,就能够看到文本框中显示了系统时间。

其实,想要获取系统当前时间的数值,还有更简单的方法,例如把前面写的公式改为下面这样,你会发现结果是一样的。

实际上,在Axure RP中一直自带6个系统变量,包括:“Year”、“Month”、“Day”、“Hours”、“Minutes”以及“Seconds”。

它们能够直接帮助我们获取系统时间中“年”、“月”、“日”、“时”、“分”、“秒”的数值。

但是,这6个系统变量在列表中是找不到的。

估计,Axure团队都忘了这6个系统变量的存在...

不过,这个案例到这里还没结束。

还有3个问题需要解决。

1、分钟的显示格式为双位数。

分钟的数值在显示一位数时不太美观,需要让“0~9”变“00~09”为的格式。

显然,我们需要给分钟的数值前面补个“0”。

我们可以通过函数将“0”这个字符串与分钟的数值连接到一起。

这个函数是“concat()”,字符串连接函数,能把一个字符串和函数的参数字符串连接到一起。

连接的公式为:[["0".concat(Minutes)]]

注意,公式中的“0”一定要在两侧带有英文半角的引号。

带有引号的“0”,就是一个字符串,或者说是字符串对象,用它就能调用字符串函数。

否则就是数字,而不是字符串。

而写在函数括号中的值或者变量,是函数的参数,参与函数的运算过程。

经过上面公式的处理,“0~9”就会变为“00~09”显示出来。

但是,“10~59”也会变为“010~059”。

所以,还要进一步处理。

使用函数“slice()”对上面公式得到的结果,进行截取操作。

“slice()”也是字符串函数,它可以输入两个参数,分别为截取的起始位置和终止位置。

同时,它的参数可以为负数,也就是从末尾向前的位置,例如,“-1”就是倒数第一个字符的位置,“-3”就是倒数第三个字符的位置。

另外,它也能只提供一个参数。

只提供一个参数时,会从参数指定的位置截取到字符串末尾。

上面公式的结果,我们需要截取末尾两位,新的公式是:[["0".concat(Minutes).slice(-2)]]

现在你应该能发现,函数并不复杂,只是需要掌握它的用途和使用方法。

2、时间格式为12小时制。

也就是说,小时的数值是“1~12”。

我们在通过系统变量“Hours”获取到的小时数值是“0~23”。

如果数值为“0”我们需要将它设置为“12”,并且时间后缀为“AM”。

这就需要[启用情形],名为“零点时”,通过条件判断系统变量“Hours”的[值][等于]“0”。

温馨提示:如果不了解情形的设置,请参考《情形(条件)的设置》。

当符合这个条件时,为[当前]元件[设置文本],公式为:12 : [["0".concat(Minutes).slice(-2)]] AM

3、区分上午与下午

严格来说是午夜之后“After Midnight”和午夜之前“Prior to Midnight”。

无所谓,你懂就好!

上午时,时间的后缀为“AM”。

下午时,时间的后缀为“PM”。

这是另外两种情形,所以,需要[添加情形]。

先添加“上午时”的情形,通过条件判断系统变量“Hours”的[值][小于]“12”,也就是“Hours”的值为“0~11”时。

当符合这个条件时,为[当前]元件[设置文本],公式为:[[Hours]] : [["0".concat(Minutes).slice(-2)]] AM

再添加“下午时”的情形,这个情形不用添加条件判断,因为不符合“上午时”情形的条件,肯定就是“下午时”。

当符合这种情形时,为[当前]元件[设置文本],公式为:[[Hours]] : [["0".concat(Minutes).slice(-2)]] PM

到这里,我们就完成了系统时间在文本框中显示的需求。

最后说一下,元件库中的“时间选择器”元件,虽然动作设置中也有名为“Hours”和“Minutes”的变量,但需要注意那些是局部变量。当自定义的局部变量与系统变量重名时,系统变量会被屏蔽。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 内置函数的应用