在日常的原型制作中，經(jīng)常用到時(shí)間的倒計(jì)時(shí)、計(jì)時(shí)等等。有一次小伙伴說能不能用中繼器進(jìn)行制作，然后每次使用就簡(jiǎn)單的改下中繼器復(fù)用。于是踩坑幾天后出現(xiàn)了這篇文章。

前期準(zhǔn)備

• 電腦：mac和win都可以（案例以win系統(tǒng)為例，mac類似）。
• 軟件：Axure 8 系列。
• 熟練程度：中級(jí)（元件使用，函數(shù)調(diào)用）。
• 相關(guān)使用元件：矩形、文本、中繼器、動(dòng)態(tài)面板。

原型元件組成展示

注：本套教程共四個(gè)元件（分秒正計(jì)時(shí)、分秒倒計(jì)時(shí)、時(shí)分秒正計(jì)時(shí)、時(shí)分秒倒計(jì)時(shí)）加一個(gè)彩蛋（獲取本機(jī)時(shí)間，開始24小時(shí)倒計(jì)時(shí)）。

以下以分秒計(jì)時(shí)為元件組成為例截圖：

演示動(dòng)圖

正文（制作過程）

舉例正計(jì)時(shí)（分、秒）與倒計(jì)時(shí)（時(shí)、分、秒）的制作方式（還有彩蛋的制作思路）。

1. 正計(jì)時(shí)（分、秒）

（1）創(chuàng)建中繼器

只保留中繼器數(shù)據(jù)一行。創(chuàng)建數(shù)據(jù)集合。

（2）根據(jù)時(shí)間的格式，創(chuàng)建時(shí)間顯示樣式

方式一：文本（分）、文本（秒）、矩形（ ：）?！咀ⅲ簝?yōu)勢(shì)：底層的矩形有占位空間，并且方便更改背景顏色。案例采用本方式】

方式二：文本（分）、文本（秒）、文本（ ：）。

（3）創(chuàng)建動(dòng)態(tài)面板

作用：通過動(dòng)態(tài)面板的循環(huán)進(jìn)行時(shí)間計(jì)數(shù)的觸發(fā)；

交互事件：狀態(tài)改變時(shí)；

方式：創(chuàng)建兩個(gè)動(dòng)態(tài)面板狀態(tài)（命名：一、二）。

（4）創(chuàng)建交互邏輯

數(shù)據(jù)賦值邏輯：進(jìn)行開始時(shí)間通過中繼器的每項(xiàng)加載時(shí)賦值給展示的文本（分）和文本（秒）。

進(jìn)行結(jié)束時(shí)間的賦值（結(jié)束狀態(tài)在條件中，此處賦值為賦值給結(jié)束條件）。

（5）進(jìn)行動(dòng)態(tài)面板的切換觸發(fā)交互。

創(chuàng)建啟動(dòng)按鈕。

給啟動(dòng)按鈕配置鼠標(biāo)單擊事件。鼠標(biāo)單擊時(shí)進(jìn)行動(dòng)態(tài)面板的向后循環(huán)(Next)，設(shè)置循環(huán)間隔1000（1000的時(shí)間長(zhǎng)度為1秒）同時(shí)設(shè)置首個(gè)狀態(tài)延時(shí)。

（6）進(jìn)行數(shù)據(jù)變化（計(jì)時(shí)展示）的交互

考慮邊界值轉(zhuǎn)換情況。當(dāng)秒鐘計(jì)時(shí)到59時(shí)，下一個(gè)展示為00。于是進(jìn)行狀態(tài)的交互時(shí)間中做狀態(tài)的劃分。

當(dāng)每次動(dòng)態(tài)面板狀態(tài)變化時(shí)，給秒的文本值進(jìn)行加一。

當(dāng)秒文本值為59時(shí)，進(jìn)行分的文本值加一同時(shí)，同時(shí)將秒的文本值重置為00。

注：%為除以某數(shù)后取余。

（7）數(shù)值優(yōu)化交互

為了符合時(shí)間的展示效果，當(dāng)時(shí)間為個(gè)位數(shù)的時(shí)候進(jìn)行前補(bǔ)充0的操作。

使用的函數(shù)：

①concat(‘string’)：將當(dāng)前本對(duì)象與另一個(gè)字符串組合。參數(shù)：string為組合在后面的字符串。

② ：slice(start,end)：從當(dāng)前本對(duì)象中截取從指定起始位置 開始到終結(jié)位置之前的字符串。參數(shù)：start為被截取部分的 起始位置，該數(shù)值可為負(fù)數(shù)；end為被截取部分的終結(jié)位置， 該數(shù)值可為負(fù)數(shù)。該參數(shù)可省略，省略該參數(shù)則由起始位置 截取本對(duì)象結(jié)尾。

注：倒計(jì)時(shí)（分、秒），調(diào)整正計(jì)時(shí)（分、秒）的【進(jìn)行數(shù)據(jù)變化（計(jì)時(shí)展示）的交互】部分的交互即可。

2. 倒計(jì)時(shí)（時(shí)、分、秒）

（1）創(chuàng)建中繼器

只保留中繼器數(shù)據(jù)一行，創(chuàng)建數(shù)據(jù)集合。

（2）根據(jù)時(shí)間的格式，創(chuàng)建時(shí)間顯示樣式

備注文本：文本（時(shí)）、文本（分）、文本（秒）、矩形（BG）。

展示文本：文本（H）、文本（M）、文本（S）。

（3）創(chuàng)建動(dòng)態(tài)面板

作用：通過動(dòng)態(tài)面板的循環(huán)進(jìn)行時(shí)間計(jì)數(shù)的觸發(fā)。

交互事件：狀態(tài)改變時(shí)。

方式：創(chuàng)建兩個(gè)動(dòng)態(tài)面板狀態(tài)（命名：一、二）。

創(chuàng)建中間橋（本次使用數(shù)據(jù)傳值的方式進(jìn)行倒計(jì)時(shí)的制作）。

數(shù)據(jù)傳值：通過將中繼器中的數(shù)據(jù)進(jìn)行組合，計(jì)算出一個(gè)轉(zhuǎn)換為秒的時(shí)間整數(shù)。然后通過數(shù)據(jù)的取余進(jìn)行計(jì)算出展示的時(shí)、分、秒。

計(jì)算公式：（小時(shí)*3600+分鐘*60+秒）

實(shí)際計(jì)算賦值:

（4）創(chuàng)建交互邏輯

數(shù)據(jù)賦值邏輯：進(jìn)行開始時(shí)間通過中繼器的每項(xiàng)加載時(shí)賦值給展示的文本（H）、文本（M）和文本（S）。

進(jìn)行結(jié)束時(shí)間的賦值（結(jié)束狀態(tài)在條件中，此處賦值為賦值給結(jié)束條件）。

（5）進(jìn)行動(dòng)態(tài)面板的切換觸發(fā)交互。

創(chuàng)建啟動(dòng)按鈕。

給啟動(dòng)按鈕配置鼠標(biāo)單擊事件。鼠標(biāo)單擊時(shí)進(jìn)行動(dòng)態(tài)面板的向后循環(huán)(Next)，設(shè)置循環(huán)間隔1000（1000的時(shí)間長(zhǎng)度為1秒）同時(shí)設(shè)置首個(gè)狀態(tài)延時(shí)。

進(jìn)行中間橋的數(shù)值計(jì)算。

（6）進(jìn)行數(shù)據(jù)變化（計(jì)時(shí)展示）的交互

進(jìn)行秒、分、時(shí)的反向計(jì)算。通過中間橋的數(shù)值，進(jìn)行計(jì)算。

（7）數(shù)值優(yōu)化交互

為了符合時(shí)間的展示效果，當(dāng)時(shí)間為個(gè)位數(shù)的時(shí)候進(jìn)行前補(bǔ)充0的操作。

使用的函數(shù)：

①concat(‘string’)；

② slice(start,end)；

③Math.floor(x)。

正計(jì)時(shí)（時(shí)、分、秒），調(diào)整上述案例的【進(jìn)行數(shù)據(jù)變化（計(jì)時(shí)展示）的交互】部分的交互即可。

彩蛋篇：獲取本機(jī)時(shí)間，開始24小時(shí)倒計(jì)時(shí)

思路：

1. 點(diǎn)擊觸發(fā)事件后，獲取電腦本地的時(shí)間。通過分別獲取電腦本地的時(shí)、分、秒，進(jìn)行計(jì)算剩余時(shí)間。
2. 小時(shí)通過23減去當(dāng)前的小時(shí)時(shí)間。
3. 分鐘通過59減去當(dāng)前的分鐘時(shí)間。
4. 秒鐘通過59減去當(dāng)前的秒鐘時(shí)間。
5. 將剩余時(shí)間轉(zhuǎn)換為中間橋的具體秒數(shù)。（參考倒計(jì)時(shí)（時(shí)、分、秒））。
6. 設(shè)置結(jié)束時(shí)間為00（時(shí)、分、秒都為00）。

總結(jié)

主要函數(shù)計(jì)算、動(dòng)態(tài)面板改變的交互事件、時(shí)間函數(shù)獲取。

本文由 @Brose 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。