本文教大家如何在Axure中，如何使用時間函數動態顯示當前時間，enjoy~

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

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

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

第一步：獲取當前時間

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

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

通過試驗我們發現，獲取到的時間，若不足兩位數，系統不會對前面補0，因此我們不能直接使用獲取到的值，首先需對獲取的值進行處理。

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

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

（3）將全局變量的值，賦值給對應的元素

第二步：通過動態面板的改變，使時間動起來

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

（1）將「時間」轉為動態面板，并將動態面板中的狀態1進行復制。

（2）當頁面加載時，使動態面板向后循環，循環間隔為1s。（當第一個狀態獲取完當前時間后，隔1s后，第二個狀態獲取當前時間，如此循環，即可實現時間自動增加）

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

（4）由于此次賦值與之前對動態面板中內容的賦值重復，將之前的刪除即可。

最后

最終實現的結果如下：

對應源文件地址：https://pan.baidu.com/s/1MCiGEId5Rs9LPPHirRyOJA

本文由 @冬瓜一號 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pixabay，基于 CC0 協議