本文教大家如何在Axure中，如何使用時間函數(shù)動態(tài)顯示當(dāng)前時間，enjoy~

首先Axure提供了很多時間函數(shù)，如下：

• Now 用途：獲取當(dāng)前計算機系統(tǒng)日期對象。
• 獲取的值示例：Sat Aug 31 2019 23:15:29 GMT+0800 (中國標(biāo)準(zhǔn)時間)
• GenDate 用途：獲取原型生成日期對象。
• 獲取的值示例：Sat Aug 31 2019 23:15:29 GMT+0800 (中國標(biāo)準(zhǔn)時間)
• getDate() 用途：獲取日期對象“日期”部分?jǐn)?shù)值(1 ~ 31)。
• getDay() 用途：獲取日期對象“星期”部分的數(shù)值(0 ~ 6)。
• getDayOfWeek() 用途：獲取日期對象“星期”部分的英文名稱。
• getFullYear() 用途：獲取日期對象“年份”部分四位數(shù)值。
• getHours() 用途：獲取日期對象“小時”部分?jǐn)?shù)值(0 ~ 23)。
• getMilliseconds() 用途：獲取日期對象的毫秒數(shù)(0 ~ 999)。
• getMinutes() 用途：獲取日期對象“分鐘”部分?jǐn)?shù)值(0 ~59)。
• getMonth() 用途：獲取日期對象“月份”部分的數(shù)值(1 ~ 12)。
• getMonthName() 用途：獲取日期對象“月份”部分的英文名稱。
• getSeconds() 用途：獲取日期對象“秒數(shù)”部分?jǐn)?shù)值(0 ~59)。
• getTime() 用途：獲取當(dāng)前日期對象中的時間值。該時間值表示從1970年1月1日00:00:00開始，到當(dāng)前日期對象時，所經(jīng)過的毫秒數(shù)，以格林威治時間為準(zhǔn)。
• getTimezoneOffset() 用途：獲取世界標(biāo)準(zhǔn)時間(UTC)與當(dāng)前主機時間之間的分鐘差值。
• getUTCDate() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“日期”部分?jǐn)?shù)值(1 ~ 31)。
• getUTCDay() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“星期”部分的數(shù)值(0 ~ 6)。
• getUTCFullYear() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“年份”部分四位數(shù)值。
• getUTCHours() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“小時”部分?jǐn)?shù)值(0 ~ 23)
• getUTCMilliseconds() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象的毫秒數(shù)(0 ~ 999)。
• getUTCMinutes() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“分鐘”部分?jǐn)?shù)值(0 ~59)。
• getUTCMonth() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“月份”部分的數(shù)值(1 ~ 12)。
• getUTCSeconds() 用途：使用世界標(biāo)準(zhǔn)時間獲取當(dāng)前日期對象“秒數(shù)”部分?jǐn)?shù)值(0 ~59)。
• Date.parse(datestring) 用途：用于分析一個包含日期的字符串，并返回該日期與1970年1月1日00:00:00之間相差的毫秒數(shù) 參數(shù)：datestring為日期格式的字符串，格式為：yyyy/mm/dd hh:mm:ss。
• toDateString() 用途：以字符串的形式獲取一個日期。
• toISOString() 用途：獲取當(dāng)前日期對象的IOS格式的日期字串，格式：YYYY-MM-DDTHH:mm:ss.sssZ。
• toJSON() 用途：獲取當(dāng)前日期對象的JSON格式的日期字串，格式： YYYY-MM-DDTHH:mm:ss.sssZ。
• toLocaleDateString() 用途：以字符串的形式獲取本地化當(dāng)前日期對象。并且只包含“年月日”部分的短日期信息。
• toLocaleTimeString() 用途：以字符串的形式獲取本地化當(dāng)前日期對象。并且只包含“時分秒”部分的短日期信息。
• toUTCString() 用途：以字符串的形式獲取相對于當(dāng)前日期對象的世界標(biāo)準(zhǔn)時間。

通過上面的說明可知，假若我們需要顯示 格式為 ‘2019-08-31 23:54:01’的時間，無法直接通過函數(shù)獲取，必須將年月日時分秒分別獲取，然后拼接顯示。

第一步：獲取當(dāng)前時間

我們將用到以下幾個函數(shù)分別獲取年月日時分秒：

• Now.getFullYear()：獲取年
• Now.getMonth()：獲取月
• Now.getDate()：獲取日
• Now.getHours()：獲取小時
• Now.getMinutes()：獲取分鐘
• Now.getSeconds()：獲取秒

通過試驗我們發(fā)現(xiàn)，獲取到的時間，若不足兩位數(shù)，系統(tǒng)不會對前面補0，因此我們不能直接使用獲取到的值，首先需對獲取的值進行處理。

（1）創(chuàng)建全局變量以便對獲取的值進行處理

（2）在賦值之前對所獲取到的值進行處理（除年外，其他的，若當(dāng)前時間不足兩位小數(shù)，需進行補0處理），處理好之后，賦值給對應(yīng)的全局變量。

（3）將全局變量的值，賦值給對應(yīng)的元素

第二步：通過動態(tài)面板的改變，使時間動起來

發(fā)現(xiàn)通過上面的方式，時間值只會在加載的時候獲取一次，若想要時間走起來，我們可通過動態(tài)面板的改變進行實現(xiàn)。

（1）將「時間」轉(zhuǎn)為動態(tài)面板，并將動態(tài)面板中的狀態(tài)1進行復(fù)制。

（2）當(dāng)頁面加載時，使動態(tài)面板向后循環(huán)，循環(huán)間隔為1s。（當(dāng)?shù)谝粋€狀態(tài)獲取完當(dāng)前時間后，隔1s后，第二個狀態(tài)獲取當(dāng)前時間，如此循環(huán)，即可實現(xiàn)時間自動增加）

（3）給動態(tài)面板增加事件，當(dāng)動態(tài)面板改變時，按照第一步的方式，對動態(tài)面板中，每個狀態(tài)下的「時間」賦值為當(dāng)前時間。

（4）由于此次賦值與之前對動態(tài)面板中內(nèi)容的賦值重復(fù)，將之前的刪除即可。

最后

最終實現(xiàn)的結(jié)果如下：

對應(yīng)源文件地址：https://pan.baidu.com/s/1MCiGEId5Rs9LPPHirRyOJA

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

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