Axure教程:如何使用時間函數動態顯示當前時間?
本文教大家如何在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 協議
評論
謝謝
http://www.aharts.cn/data-analysis/3547828.html