中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

前期準(zhǔn)備

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

原型元件組成展示

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

以下以分秒計時為元件組成為例截圖：

演示動圖

正文（制作過程）

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

1. 正計時（分、秒）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用的函數(shù)：

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

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

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

2. 倒計時（時、分、秒）

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

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

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

備注文本：文本（時）、文本（分）、文本（秒）、矩形（BG）。

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

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

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

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

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

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

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

計算公式：（小時*3600+分鐘*60+秒）

實際計算賦值:

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

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

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

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

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

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

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

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

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

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

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

使用的函數(shù)：

①concat(‘string’)；

② slice(start,end)；

③Math.floor(x)。

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

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

思路：

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

總結(jié)

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

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

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