Axure教程:【實例】文本自動獲取日期、時間

0 評論 4505 瀏覽 12 收藏 5 分鐘

編輯導讀:工作中,有些系統會多次用到日期或者時間。如何用函數在畫面加載時,自動獲取日期或時間?下面大家來一起看一下。

元件準備:

  1. 第一個文本標簽,取名為Year;
  2. 第二個文本標簽,取名為Month;
  3. 第三個文本文本標簽,取名為Day;
  4. 第四個文本標簽,取名為Hours;
  5. 第五個文本標簽,取名為Minutes;
  6. 第六個文本文本標簽,取名為Seconds;
  7. 第七個文本文本標簽,取名為YYYY-MM-DD hh:mm:ss。

一、單獨獲取年、月、日、時、分、秒

下面先講解如何單獨獲取年、月、日、時、分、秒的方法。

1. 獲取年份

對文本標簽:Year進行設置。

交互:選擇“載入時”,“設置文本”目標為“當前”,如下圖所示:

點擊“fx”進入插入或函數畫面,然后點擊“插入變量或函數”,選擇日期列表中的函數:getFullYear(),如下圖所示:

設置后的效果如下圖所示:

2. 獲取月份

按照設置文本標簽:Year的方法,對文本標簽:Month進行設置,選擇日期列表中的函數:getMonth(),設置后的效果如下圖所示:

3. 獲取日

按照設置文本標簽:Year的方法,對文本標簽:Day進行設置,選擇日期列表中的函數:getDate(),設置后的效果如下圖所示:

4. 獲取小時

按照設置文本標簽:Year的方法,對文本標簽:Hours進行設置,選擇日期列表中的函數:getHours(),設置后的效果如下圖所示:

5. 獲取分鐘

按照設置文本標簽:Year的方法,對文本標簽:Minutes進行設置,選擇日期列表中的函數:getMinutes(),設置后的效果如下圖所示:

6. 獲取秒

按照設置文本標簽:Year的方法,對文本標簽:Seconds進行設置,選擇日期列表中的函數:getSeconds(),設置后的效果如下圖所示:

7. 效果展示

效果如下圖所示:

二、日期時間顯示

結合以上方法,對文本文本標簽,取名為YYYY-MM-DD hh:mm:ss。顯示格式為:YYYY-MM-DD hh:mm:ss。選擇函數畫面如下圖所示:

注意:

  1. 畫面中,年,月,日,中間是用符號“-”隔開的,也可以用“/”或“.”;
  2. 畫面中,時,分,秒中間是用符號“:”隔開的;
  3. 日與時中間有空格。

最終顯示效果如下圖所示:

三、函數總結

年,月,日,時,分,秒對應的函數如下表格內容所示:

 

本文由 @龍角星宿 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!