Axure教程:如何使用時間函數動態顯示當前時間?

2 評論 13817 瀏覽 17 收藏 8 分鐘

本文教大家如何在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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝

    來自江蘇 回復