原型設(shè)計(jì)工具Axure RP入門(mén)教程（十一）：計(jì)時(shí)器教程

---

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

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買(mǎi)Axure RP

---

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

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

小部件設(shè)置

• 打開(kāi)一個(gè)新的RP文件，然后在畫(huà)布上打開(kāi)Page 1。
• 將一個(gè)矩形小部件拖到畫(huà)布上。

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

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

計(jì)數(shù)互動(dòng)

頁(yè)面加載時(shí)顯示變量的值

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

遞增變量的值

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

使用等待動(dòng)作設(shè)置循環(huán)間隔

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

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

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

預(yù)覽互動(dòng)

預(yù)覽頁(yè)面并觀(guān)看矩形文本以秒為單位的計(jì)數(shù)。

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

將計(jì)時(shí)器停止在某個(gè)值

為防止計(jì)時(shí)器超過(guò)某個(gè)值，請(qǐng)?jiān)陧?yè)面加載情況下添加以下條件之一：

如果計(jì)數(shù)開(kāi)始時(shí)：

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

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

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

將時(shí)間顯示為分鐘和秒

要以分鐘和秒為單位設(shè)置計(jì)時(shí)器格式，請(qǐng)通過(guò)在設(shè)置為拖放列表中選擇文本，在設(shè)置文本操作中將矩形窗口小部件的文本設(shè)置為以下表達(dá)式之一：
沒(méi)有前導(dǎo)零：

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

前導(dǎo)零：

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

---

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