欢迎光临散文网 会员登陆 & 注册

AXURE交互高级篇:官方数学、函数表达式文档

2022-09-20 21:19 作者:东岳老师  | 我要投稿

数学、函数和表达式

表达式允许您通过原型中的交互动态生成文本和数值。您可以使用表达式来执行诸如计算购物车的购买总额、动态构建 UI 消息以及显示当前日期等操作。

您可以在任何旁边带有fx图标的字段中使用表达式。直接在字段中输入您的表达式或单击图标打开“编辑值”对话框。

从那里,您可以单击插入变量或函数以查看可在表达式中使用的变量和函数的完整列表。您还可以创建局部变量来访问表达式中的特定小部件属性。

写表达式

Axure RP 将任何包含在双方括号中的文本视为一个表达式,并且该表达式本身将在 Web 浏览器中被其自己的最终输出值替换。括号外的文本被视为静态文本,不会在 Web 浏览器中更改。

例如,如果您将小部件上的文本设置为Your total is $[[ 5.50 + 2.99 ]],则小部件的文本将Your total is $8.49在 Web 浏览器中读取。

数字和数学

基本运算符

您可以在表达式中执行以下基本数学运算:

加法:+

[[ 5 + 2 ]] -> 7


减法:-

[[ 5 - 2 ]] -> 3


乘法:*

[[ 5 * 2 ]] -> 10


分配: /

[[ 5 / 2 ]] -> 2.5


模数/余数:%

[[ 5 % 2 ]] -> 1


高级数字和数学函数

要执行更高级的数学运算,请使用“插入变量”或“函数”菜单中“数字数学”下列出的函数。

您可以将这些功能用于:

  • 数字:

    [[ 7.546.toFixed(2) ]]


  • 包含数值的 变量:

    [[ TaxRateVar.toFixed(2) ]]


  • 其他操作和函数返回的数值:

    [[ (2.55*7.3).toFixed(2) ]]


x .toExponential(decimalPoints)

返回以指数表示法表示 x 的字符串。您可以在括号中指定小数位数。

[[ 12345.toExponential() ]] -> 1.2345e+4[[ 12345.toExponential(2) ]] -> 1.23e+4


x .toFixed(decimalPoints)

将 x 舍入到括号中指定的小数位数。

[[ 12.345.toFixed(2) ]] -> 12.35


x .toPrecision(长度)

返回一个表示 x 的字符串,具有指定的有效数字位数。对于大数,可能以指数表示法返回。

[[ 12.34.toPrecision(3) ]] -> 12.3[[ 12.34.toPrecision(5) ]] -> 12.340[[ 1234.toPrecision(2) ]] -> 1.2e+3


数学.abs( x )

返回 x 的绝对值。

[[ Math.abs(1) ]] -> 1[[ Math.abs(-1) ]] -> 1


数学.acos( x )

以弧度返回 x 的反余弦值。

[[ Math.acos(-1) ]] -> 3.141592653589793[[ Math.acos(0) ]] -> 1.5707963267948966[[ Math.acos(1) ]] -> 0


数学.asin( x )

以弧度返回 x 的反正弦值。

[[ Math.asin(-1) ]] -> -1.5707963267948966[[ Math.asin(0) ]] -> 0[[ Math.asin(1) ]] -> 1.5707963267948966


数学.atan( x )

返回 x 的反正切(以弧度为单位)。

[[ Math.atan(1) ]] -> 0.7853981633974483[[ Math.atan(0) ]] -> 0[[ Math.atan(-0) ]] -> -0


Math.atan2( y , x )

返回正 x 轴与从 (0,0) 到点 (x,y) 的射线之间的平面角度(以弧度为单位)。

[[ Math.atan2(90, 15) ]] -> 1.4056476493802699[[ Math.atan2(15, 90) ]] -> 0.16514867741462683


数学.ceil( x )

将 x 向上舍入到最接近的整数。

[[ Math.ceil(12.7) ]] -> 13[[ Math.ceil(12.3) ]] -> 13


数学.cos( x )

返回 x 的余弦,必须以弧度表示。

[[ Math.cos(0) ]] -> 1[[ Math.cos(1) ]] -> 0.5403023058681398

复制

数学.exp( x )

返回 e 的 x 次方,其中 e 是欧拉数。

[[ Math.exp(0) ]] -> 1[[ Math.exp(1) ]] -> 2.718281828459045


数学地板(x)

将 x 向下舍入到最接近的整数。

[[ Math.floor(12.7) ]] -> 12[[ Math.floor(12.3) ]] -> 12


数学.log( x )

返回 x 的自然对数。

[[ Math.log(1) ]] -> 0[[ Math.log(10) ]] -> 2.302585092994046


Math.max( x , y , ...)

返回括号中最大的数字。

[[ Math.max(1, 2, 3) ]] -> 3


Math.min( x , y , ...)

返回括号中最小的数字。

[[ Math.min(1, 2, 3) ]] -> 1


数学.pow( x , y )

返回 x 的 y 次幂。

[[ Math.pow(5, 2) ]] -> 25


数学随机()

返回 0(包括)和 1(不包括)之间的随机数。

[[ Math.random() ]] -> 0.9255151869426522[[ Math.random() ]] -> 0.313352887182183



查看关于 Math.random() 的 Mozilla Developer Network 参考资料,了解如何在您自己的指定范围内生成随机数。

数学.sin( x )

返回 x 的正弦值,必须以弧度表示。

[[ Math.sin(0) ]] -> 0[[ Math.sin(1) ]] -> 0.8414709848078965


数学.sqrt( x )

返回 x 的平方根。

[[ Math.sqrt(25) ]] -> 5


数学.tan( x )

返回 x 的正切,必须以弧度表示。

[[ Math.tan(0) ]] -> 0[[ Math.tan(1) ]] -> 1.5574077246549023


字符串(文本)

要操作文本字符串,请使用“插入变量”或“函数”菜单中“字符串”下列出的函数。

您可以将这些功能用于:

  • 双引号或单引号内的文本字符串:

    [[ "Hello, world!".toUpperCase() ]]


  • 包含字符串值的 变量:

    [[ GreetingVar.toUpperCase() ]]


  • 其他操作和函数返回的字符串值:

    [[ "Hello, world!".substr(0,5).toUpperCase() ]]


字符串.长度

返回字符串的字符长度,包括空格。

[[ "Hello, world!".length ]] -> 13


字符串.charAt(索引)

返回字符串中指定索引处的字符。

[[ "Hello, world!".charAt(7) ]] -> w


字符串.charCodeAt(索引)

返回字符串中指定索引处字符的 UTF-16 代码单元。

[[ "Hello, world!".charCodeAt(7) ]] -> 119


字符串.concat("字符串", ...)

括号中的字符串(连接)添加到调用函数的字符串中。

[[ "Hello".concat(", world!") ]] -> Hello, world!



您还可以使用加法运算符连接字符串+

[[ "Hello" + ", world!" ]] -> Hello, world!

字符串.indexOf("searchValue")

返回调用函数的字符串中搜索值的第一个实例的起始索引。如果未找到搜索值,则返回 -1。

[[ "Hello, world!".indexOf("o") ]] -> 4[[ "Hello, world!".indexOf("Howdy") ]] -> -1


字符串.lastIndexOf("searchValue")

返回调用函数的字符串中搜索值的最后一个实例的起始索引。如果未找到搜索值,则返回 -1。

[[ "Hello, world!".lastIndexOf("o") ]] -> 8[[ "Hello, world!".lastIndexOf("Howdy") ]] -> -1


字符串.replace("searchValue", "newValue")

用新值替换搜索值的所有实例。

[[ "Hello, world!".replace("Hello", "Howdy") ]] -> Howdy, world!


字符串.slice(startIndex, endIndex)

返回字符串的片段,从第一个索引处的字符开始,到第二个索引之前的字符结束。您可以选择省略第二个索引以代替在字符串末尾结束。

您可以提供负索引以从字符串末尾向后计数,如下面的第三个示例所示。

[[ "Hello, world!".slice(3, 10) ]] -> lo, wor [[ "Hello, world!".slice(3) ]] -> lo, world! [[ "Hello, world!".slice(-6, 12) ]] -> world


字符串.substr(startIndex, 长度)

返回字符串的片段,从起始索引处的字符开始,一直持续到达到指定长度。您可以选择省略长度以在字符串末尾结束。

您可以提供负索引以从字符串末尾向后计数,如下面的第三个示例所示。

[[ "Hello, world!".substr(3, 7) ]] -> lo, wor [[ "Hello, world!".substr(3) ]] -> lo, world! [[ "Hello, world!".substr(-6, 5) ]] -> world


字符串.substring(startIndex, endIndex)

返回字符串的片段,从第一个索引处的字符开始,到第二个索引之前的字符结束。您可以选择省略第二个索引以代替在字符串末尾结束。

[[ "Hello, world!".substring(3, 10) ]] -> lo, wor [[ "Hello, world!".substring(3) ]] -> lo, world!


笔记

substring()方法不支持负索引。

字符串.toLowerCase()

将字符串转换为所有小写字符。

[[ "Hello, world!".toLowerCase() ]] -> hello, world!

复制

字符串.toUpperCase()

将字符串转换为所有大写字符。

[[ "Hello, world!".toUpperCase() ]] -> HELLO, WORLD!


字符串.trim()

删除字符串开头和结尾的所有空格字符。

[[ "   Hello, world!   ".trim() ]] -> Hello, world


小部件属性

您可以使用插入变量或函数菜单中的小部件下列出的选项访问小部件的属性,例如它们的位置和尺寸。

为了使用这些选项,您需要将它们附加到带有“点符号”的小部件对象:Object.property。您可以使用三个小部件对象:

  • 指的是您在其下配置当前操作的事件的小部件,例如您可能正在使用其Click 或 Tap事件的按钮。

    [[ This.width ]]


  • 目标是指作为您当前正在配置的操作的目标的小部件,例如使用显示/隐藏操作隐藏的小部件。

    [[ Target.width ]]


  • LVAR1指的是您存储在局部变量中的小部件。(将“LVAR1”替换为您分配给本地变量的任何名称。)

    [[ LVAR1.width ]]

    复制

小部件.x

返回小部件左上角的 x 值。

[[ LVAR1.x ]] -> 100


小部件.y

返回小部件左上角的 y 值。

[[ LVAR1.y ]] -> 100


小部件.width

返回小部件的宽度(以像素为单位)。

[[ LVAR1.width ]] -> 300


小部件.height

返回小部件的高度(以像素为单位)。

[[ LVAR1.height ]] -> 170


小部件.scrollX

返回可滚动动态面板已水平滚动的像素数。

[[ LVAR1.scrollX ]] -> 50


小部件.scrollY

返回可滚动动态面板已垂直滚动的像素数。

[[ LVAR1.scrollY ]] -> 50


小部件.text

返回小部件的文本(如果有)。

[[ LVAR1.text ]] -> first.last@domain.com


小部件.name

返回小部件的名称,如果你给它一个。

[[ LVAR1.name ]] -> Email Field


小部件.top

返回小部件上边缘的 y 值。

[[ LVAR1.top ]] -> 100


小部件.left

返回小部件左边缘的 x 值。

[[ LVAR1.left ]] -> 100


小部件.right

返回小部件右边缘的 x 值。

[[ LVAR1.right ]] -> 400


小部件.bottom

返回小部件底部边缘的 y 值。

[[ LVAR1.bottom ]] -> 270


小部件.opacity

将小部件的不透明度作为 0 到 100 之间的数字返回。

[[ LVAR1.opacity ]] -> 85


小部件.rotation

将小部件的旋转作为 0 到 359 之间的数字返回。

[[ LVAR1.rotation ]] -> 90


页面、窗口和光标

页面名称

返回当前页面的名称,如“页面”窗格中所示。

[[ PageName ]] -> Login Page


窗口宽度

返回浏览器窗口视口的宽度(以像素为单位)。

[[ Window.width ]] -> 1920


窗口高度

返回浏览器窗口视口的高度(以像素为单位)。

[[ Window.height ]] -> 948


Window.scrollX

返回浏览器窗口水平滚动的像素数。

[[ Window.scrollX ]] -> 100


Window.scrollY

返回浏览器窗口垂直滚动的像素数。

[[ Window.scrollY ]] -> 100


光标.x

返回光标在页面上位置的 x 值。

[[ Cursor.x ]] -> 100


光标.y

返回光标在页面上的位置的 y 值。

[[ Cursor.y ]] -> 100


拖动X

当您拖动动态面板小部件时,返回光标在 X 轴上的先前位置和当前位置之间的像素差。向右拖动时值为正,向左拖动时值为负。

[[ DragX ]] -> 3[[ DragX ]] -> -5


拖动Y

当您拖动动态面板小部件时,返回光标在 Y 轴上的先前位置和当前位置之间的像素差。向下拖动时值为正,向上拖动时值为负。

[[ DragY ]] -> 3[[ DragY ]] -> -5


TotalDragX

当您拖动动态面板小部件时,返回光标的起始位置与其沿 X 轴的当前位置之间的像素差。向右拖动时值为正,向左拖动时值为负。

[[ TotalDragX ]] -> 30[[ TotalDragX ]] -> -50


总阻力

当您拖动动态面板小部件时,返回光标的起始位置与其沿 Y 轴的当前位置之间的像素差。向下拖动时值为正,向上拖动时值为负。

[[ TotalDragY ]] -> 30[[ TotalDragY ]] -> -50


拖动时间

返回可拖动动态面板从拖动开始到拖放的总时间(以毫秒为单位)。

[[ DragTime ]] -> 1525


笔记

虽然DragTime跟踪整个拖动的持续时间,但返回值仅在拖动过程中光标移动时更新。

日期和时间

使用插入变量或函数菜单中日期下列出的函数来生成和操作日期和时间信息。

您可以将这些函数与以下日期对象一起使用:

  • 现在

  • 生成日期

  • 日期.UTC()

  • 日期解析()

现在

表示当前日期和时间的日期对象。单独使用时,返回当前日期和时间,完全清楚并与 Web 浏览器的时区。

[[ Now ]] -> Wed Nov 14 2018 16:20:24 GMT-0800 (Pacific Standard Time)


生成日期

一个日期对象,表示上次生成原型 HTML 的日期和时间。单独使用时,返回生成日期和时间,完全明确并与 Web 浏览器的时区。

[[ GenDate ]] -> Wed Nov 14 2018 16:20:24 GMT-0800 (Pacific Standard Time)


Now.getDate() 和 Now.getUTCDate()

返回一个数字,表示给定日期对象的月份日期,可以是 Web 浏览器的时区,也可以是协调世界时 (UTC)。

[[ Now.getDate() ]] -> 14[[ Now.getUTCDate() ]] -> 15


Now.getDay() 和 Now.getUTCDay()

返回一个数字,表示给定日期对象的星期几,采用 Web 浏览器的时区或协调世界时 (UTC)。星期日是 0,星期六是 6。

[[ Now.getDay() ]] -> 3[[ Now.getUTCDay() ]] -> 4


现在.getDayOfWeek()

返回给定日期对象的星期几的名称。

[[ Now.getDayOfWeek() ]] -> Wednesday


Now.getFullYear() 和 Now.getUTCFullYear()

以四位数格式返回给定日期对象的年份,可以是 Web 浏览器的时区,也可以是协调世界时 (UTC)。

[[ Now.getFullYear() ]] -> 2018[[ Now.getUTCFullYear() ]] -> 2018


Now.getHours() 和 Now.getUTCHours()

以 0 到 23 之间的数字(24 小时/军用格式)返回给定日期对象时间的小时部分,可以是 Web 浏览器的时区,也可以是协调世界时 (UTC)。

[[ Now.getHours() ]] -> 16[[ Now.getUTCHours() ]] -> 0


Now.getMilliseconds() 和 Now.getUTCMilliseconds()

返回给定日期对象时间的毫秒部分,可以是 Web 浏览器的时区或协调世界时 (UTC)。

[[ Now.getMilliseconds() ]] -> 838[[ Now.getUTCMilliseconds() ]] -> 838


Now.getMinutes() 和 Now.getUTCMinutes()

返回给定日期对象时间的分钟部分,可以是 Web 浏览器的时区,也可以是协调世界时 (UTC)。

[[ Now.getMinutes() ]] -> 20[[ Now.getUTCMinutes() ]] -> 20


Now.getMonth() 和 Now.getUTCMonth()

Now.getMonth()返回给定日期对象的月份,作为 Web 浏览器时区中 1 到 12 之间的数字。

Now.getUTCMonth()以协调世界时 (UTC) 中 0 到 11 之间的数字形式返回给定日期对象的月份。

[[ Now.getMonth() ]] -> 11[[ Now.getUTCMonth() ]] -> 10


现在.getMonthName()

返回给定日期对象月份的名称。

[[ Now.getMonthName() ]] -> November


Now.getSeconds() 和 Now.getUTCSeconds()

返回给定日期对象时间的秒部分,可以是 Web 浏览器的时区,也可以是协调世界时 (UTC)。

[[ Now.getSeconds() ]] -> 24[[ Now.getUTCSeconds() ]] -> 24


现在.getTime()

返回 1970 年 1 月 1 日 00:00:00 UTC 和给定日期对象之间经过的毫秒数。

[[ Now.getTime() ]] -> 1542235968871


Now.getTimezoneOffset()

返回从 Web 浏览器的区域设置到协调世界时 (UTC) 的时区差异(以分钟为单位)。

[[ Now.getTimezoneOffset() ]] -> 480


日期解析(日期字符串)

解析日期的给定字符串表示并创建一个新的日期对象。返回 1970 年 1 月 1 日 00:00:00 UTC 和给定日期之间经过的毫秒数。

日期字符串可能有多种格式,包括NowGenDate返回的格式。

[[ Date.parse(Now) ]] -> 1542236704000[[ Date.parse("2018-11-14") ]] -> 1542153600000[[ Date.parse("Jun 28, 1969") ]] -> -16131600000


Now.toDateString()

返回日期对象的简化版本,仅包括星期几、月份、日期和年份。

[[ Now.toDateString() ]] -> Wed Nov 14 2018


现在.toISOString()

以协调世界时 (UTC) 的简化扩展 ISO 格式返回日期对象。

[[ Now.toISOString() ]] -> 2018-11-15T00:31:33.666Z


Now.toLocaleDateString()

根据 Web 浏览器的设置,返回日期对象的日期部分的语言和区域敏感版本。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域设置。

[[ Now.toLocaleDateString() ]] -> 11/15/2018[[ Now.toLocaleDateString("en-GB") ]] -> 15/11/2018[[ Now.toLocaleDateString("ar-EG") ]] -> ١٥‏/١١‏/٢٠١٨


Now.toLocaleTimeString()

根据 Web 浏览器的设置,返回日期对象的时间部分的语言和区域敏感版本。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域设置。

[[ Now.toLocaleTimeString() ]] -> 5:00:06 PM [[ Now.toLocaleTimeString("en-GB") ]] -> 17:00:06[[ Now.toLocaleTimeString("ar-EG") ]] -> ١٢:٢٩:٠٢ م

复制

Now.toLocaleString()

根据 Web 浏览器的设置,返回日期对象的语言和区域敏感版本。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域设置。

[[ Now.toLocaleString() ]] -> 11/15/2018, 5:00:06 PM [[ Now.toLocaleString("en-GB") ]] -> 15/11/2018, 17:00:06[[ Now.toLocaleString("ar-EG") ]] -> ١٥‏/١١‏/٢٠١٨ ١٢:٣٥:٠٧ م


Now.toTimeString()

返回日期对象的时间部分,完全表达并带有 Web 浏览器的时区。

[[ Now.toTimeString() ]] -> 17:00:06 GMT-0800 (Pacific Standard Time)


现在.toUTCString()

以协调世界时 (UTC) 返回日期对象的缩短版本。

[[ Now.toUTCString() ]] -> Thu, 15 Nov 2018 01:00:06 GMT


Date.UTC(年、月、日、时、分、秒、毫秒)

以协调世界时 (UTC) 构造一个新的日期对象,并返回该日期与 1970 年 1 月 1 日 00:00:00 UTC 之间经过的毫秒数。参数必须采用以下格式:

  • 年份(必填):四位数

  • 月(必需): 0(一月)和 11(十二月)之间的整数

  • day: 1 到 31 之间的整数。如果省略,默认为 1

  • 小时: 0 到 23 之间的整数。如果省略,默认为 0

  • 分钟: 0 到 59 之间的整数。如果省略,默认为 0

  • second: 0 到 59 之间的整数。如果省略,默认为 0

  • 毫秒: 0 到 999 之间的整数。如果省略,默认为 0

[[ Date.UTC(1969, 5, 28, 1, 20) ]] -> -16152000000


Now.addYears(年)

将指定的年数添加到日期对象并返回新的日期和时间,完全清楚并与 Web 浏览器的时区。

[[ Now.addYears(3) ]] -> Mon Nov 15 2021 13:00:34 GMT-0800 (Pacific Standard Time)


Now.addMonths(月)

将指定的月数添加到日期对象并返回新的日期和时间,完全清晰并带有 Web 浏览器的时区。

[[ Now.addMonths(3) ]] -> Fri Feb 15 2019 13:00:34 GMT-0800 (Pacific Standard Time)


Now.addDays(天)

将指定的天数添加到日期对象并返回新的日期和时间,完全明确并与 Web 浏览器的时区。

[[ Now.addDays(3) ]] -> Sun Nov 18 2018 13:00:34 GMT-0800 (Pacific Standard Time)


Now.addHours(小时)

将指定的小时数添加到日期对象并返回新的日期和时间,完全清晰并带有 Web 浏览器的时区。

[[ Now.addHours(3) ]] -> Thu Nov 15 2018 16:00:34 GMT-0800 (Pacific Standard Time)


Now.addMinutes(分钟)

将指定的分钟数添加到日期对象并返回新的日期和时间,完全清楚并带有 Web 浏览器的时区。

[[ Now.addMinutes(3) ]] -> Thu Nov 15 2018 13:03:34 GMT-0800 (Pacific Standard Time)


Now.addSeconds(秒)

将指定的秒数添加到日期对象并返回新的日期和时间,完全清晰并带有 Web 浏览器的时区。

[[ Now.addSeconds(3) ]] -> Thu Nov 15 2018 13:00:37 GMT-0800 (Pacific Standard Time)


Now.addMilliseconds(毫秒)

将指定的毫秒数添加到日期对象并返回新的日期和时间,完全明确并与 Web 浏览器的时区。

[[ Now.addMilliseconds(3) ]] -> Thu Nov 15 2018 13:00:37 GMT-0800 (Pacific Standard Time)


布尔值

布尔运算符用于编写计算结果为truefalse的比较表达式。比较表达式用于转发器过滤、更新和标记转发器行以及编写复杂的条件逻辑等。

等于:==

[[ 5 + 2 == 7 ]] -> true


不等于:!=

[[ 5 + 2 != 8 ]] -> true


小于:<

[[ 5 + 2 < 4 + 3 ]] -> false


小于或等于:<=

[[ 5 + 2 <= 4 + 3 ]] -> true


大于:>

[[ 5 + 2 > 4 + 3 ]] -> false


大于或等于:>=

[[ 5 + 2 >= 4 + 2 ]] -> true


接下来的运算符andor运算符用于组合两个或多个比较表达式。当所有组合比较的结果为true时,使用and的表达式将评估为true,当任何一个比较评估为true时,使用or的表达式将评估为true

和: &&

[[ 5 + 2 == 7 && 4 + 3 == 7 ]] -> true[[ 5 + 2 == 7 && 4 + 3 == 8 ]] -> false


或:||

[[ 5 + 2 == 7 || 4 + 3 == 8 ]] -> true[[ 5 + 2 == 8 || 4 + 3 == 8 ]] -> false




AXURE交互高级篇:官方数学、函数表达式文档的评论 (共 条)

分享到微博请遵守国家法律