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

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

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

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

小部件設(shè)置

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

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

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

計(jì)數(shù)互動

頁面加載時顯示變量的值

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

遞增變量的值

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

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

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

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

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

預(yù)覽互動

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

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

將計(jì)時器停止在某個值

為防止計(jì)時器超過某個值，請?jiān)陧撁婕虞d情況下添加以下條件之一：

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

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

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

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

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

[[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)及最新資訊。