Axure教程:【實例】文本自動獲取日期、時間
編輯導讀:工作中,有些系統會多次用到日期或者時間。如何用函數在畫面加載時,自動獲取日期或時間?下面大家來一起看一下。
元件準備:
- 第一個文本標簽,取名為Year;
- 第二個文本標簽,取名為Month;
- 第三個文本文本標簽,取名為Day;
- 第四個文本標簽,取名為Hours;
- 第五個文本標簽,取名為Minutes;
- 第六個文本文本標簽,取名為Seconds;
- 第七個文本文本標簽,取名為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。選擇函數畫面如下圖所示:
注意:
- 畫面中,年,月,日,中間是用符號“-”隔開的,也可以用“/”或“.”;
- 畫面中,時,分,秒中間是用符號“:”隔開的;
- 日與時中間有空格。
最終顯示效果如下圖所示:
三、函數總結
年,月,日,時,分,秒對應的函數如下表格內容所示:
本文由 @龍角星宿 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
- 目前還沒評論,等你發揮!