原型设计工具Axure RP入门教程（十一）：计时器教程

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何使用交互循环制作一个以秒为单位递增或递减的计时器。

提示：您可以使用此交互循环的基本结构来创建要无限期发生的任何类型的交互。

小部件设置

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将一个矩形小部件拖到画布上。

创建一个计数器变量

• 在顶部菜单中，转到项目→全局变量。
• 在全局变量对话框中，单击添加以添加新变量。将其命名为CounterVar，并将其默认值设置为0。
• 单击确定关闭对话框。

计数互动

页面加载时显示变量的值

• 单击画布上的空白点以选择页面本身。
• 在交互窗格中单击新建交互。
• 在出现的列表中选择页面加载事件，然后选择设置文本操作。
• 在目标下拉列表中选择矩形小部件。
• 在设置为下，选择变量的值。 然后在变量下拉列表中选择CounterVar变量。
• 单击确定以保存操作。

递增变量的值

• 单击页面加载块底部的“ +”插入动作图标，然后在出现的列表中选择设置变量值动作。
• 在目标下拉列表中选择CounterVar。
• 在值字段中，输入[[CounterVar + 1]]。（在Web浏览器中执行该操作时，带括号的表达式会将变量的当前值加1。）
• 单击确定以保存操作。

使用等待动作设置循环间隔

• 再次单击页面加载块底部的插入操作图标，然后在出现的列表中选择等待操作。
• 在ms字段中保留1000，然后单击OK保存操作。

通过再次触发页面加载事件来创建循环

• 最后一次单击页面加载块底部的插入动作图标，然后在出现的列表中选择Fire事件动作。
• 在目标下拉菜单中选择页面，然后单击添加事件。
• 在事件列表中选择页面加载，然后单击确定以保存操作。

预览互动

预览页面并观看矩形文本以秒为单位的计数。

附加信息和提示
倒数
要使计时器倒计时，请将CounterVar变量的默认值设置为所需的时间（以秒为单位）。例如对于五分钟计时器（5 x 60）使用默认值300。然后，不用增加变量的值，而使用以下表达式减少它：[[CounterVar-1]]

将计时器停止在某个值

为防止计时器超过某个值，请在页面加载情况下添加以下条件之一：

如果计数开始时：

value of variable — CounterVar — is less than or equals — value — (stop time in seconds)

如果计数结束时：

value of variable — CounterVar — is greater than or equals — value — (stop time in seconds)

将时间显示为分钟和秒

要以分钟和秒为单位设置计时器格式，请通过在设置为拖放列表中选择文本，在设置文本操作中将矩形窗口小部件的文本设置为以下表达式之一：
没有前导零：

[[Math.floor(CounterVar/60)]]:[[CounterVar%60]]

前导零：

[['0'.concat(Math.floor(CounterVar/60)).slice(-2)]]:[['0'.concat(CounterVar%60).slice(-2)]]

---

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。