本文教大家如何在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)由於此次賦值與之前對動態面板中內容的賦值重複,將之前的刪除即可。
最後
最終實現的結果如下:
本文由 @冬瓜一號 原創發布於人人都是產品經理。未經許可,禁止轉載
題圖來自 Pixabay,基於 CC0 協議