原型設計工具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微信公眾號???，了解產品的最新動態及最新資訊。