原型設計工具Axure RP入門教程（十一）：計時器教程

---

Axure RP是一套專門為網(wǎng)站或應用程序所設計的快速原型設計工具， 可以讓應用網(wǎng)站策劃人員或網(wǎng)站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費下載Axure RP 優(yōu)惠購買Axure RP

---

在本教程中，您將學習如何使用交互循環(huán)制作一個以秒為單位遞增或遞減的計時器。

提示：您可以使用此交互循環(huán)的基本結(jié)構(gòu)來創(chuàng)建要無限期發(fā)生的任何類型的交互。

小部件設置

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將一個矩形小部件拖到畫布上。

創(chuàng)建一個計數(shù)器變量

• 在頂部菜單中，轉(zhuǎn)到項目→全局變量。
• 在全局變量對話框中，單擊添加以添加新變量。將其命名為CounterVar，并將其默認值設置為0。
• 單擊確定關(guān)閉對話框。

計數(shù)互動

頁面加載時顯示變量的值

• 單擊畫布上的空白點以選擇頁面本身。
• 在交互窗格中單擊新建交互。
• 在出現(xiàn)的列表中選擇頁面加載事件，然后選擇設置文本操作。
• 在目標下拉列表中選擇矩形小部件。
• 在設置為下，選擇變量的值。 然后在變量下拉列表中選擇CounterVar變量。
• 單擊確定以保存操作。

遞增變量的值

• 單擊頁面加載塊底部的“ +”插入動作圖標，然后在出現(xiàn)的列表中選擇設置變量值動作。
• 在目標下拉列表中選擇CounterVar。
• 在值字段中，輸入[[CounterVar + 1]]。（在Web瀏覽器中執(zhí)行該操作時，帶括號的表達式會將變量的當前值加1。）
• 單擊確定以保存操作。

使用等待動作設置循環(huán)間隔

• 再次單擊頁面加載塊底部的插入操作圖標，然后在出現(xiàn)的列表中選擇等待操作。
• 在ms字段中保留1000，然后單擊OK保存操作。

通過再次觸發(fā)頁面加載事件來創(chuàng)建循環(huán)

• 最后一次單擊頁面加載塊底部的插入動作圖標，然后在出現(xiàn)的列表中選擇Fire事件動作。
• 在目標下拉菜單中選擇頁面，然后單擊添加事件。
• 在事件列表中選擇頁面加載，然后單擊確定以保存操作。

預覽互動

預覽頁面并觀看矩形文本以秒為單位的計數(shù)。

附加信息和提示
倒數(shù)
要使計時器倒計時，請將CounterVar變量的默認值設置為所需的時間（以秒為單位）。例如對于五分鐘計時器（5 x 60）使用默認值300。然后，不用增加變量的值，而使用以下表達式減少它：[[CounterVar-1]]

將計時器停止在某個值

為防止計時器超過某個值，請在頁面加載情況下添加以下條件之一：

如果計數(shù)開始時：

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

如果計數(shù)結(jié)束時：

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)]]

---

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。