axure原型案例作品:axure時間選擇器控制項

我們在做頁面交互設計時,如何自動獲取電腦的日期和時間呢?像下圖這樣,讓設計的產品更有真實感:

AxureRP 實戰(四)如何自動獲取電腦日期和時間

本次教程以上圖的日期時間格式為例:「YYYY-MM-DD hh:mm:ss」做講解。

首先,拖入文本標籤元件 –> 命名為:”date&time” –> 點擊「新建交互」 –> 形狀選擇「載入時」 –> 元件動作選擇「設置文本」 –> 目標選擇「當前元件」 –> 點擊「fx」,彈出編輯文本彈出框 –>

AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間

點擊「插入變數或函數…」 –> 依次點擊「getFullYear()」、「getMonth()」、「getDate()」,「getHours()」、「getMinutes()」、「getSeconds()」,年、月、日中間用「-」隔開,小時、分鐘、秒之間用「:」隔開,日期和時間直接用空格間隔 –>

[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()]] [[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]

AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間

點擊「確定」後 –> 「完成」 –>

AxureRP 實戰(四)如何自動獲取電腦日期和時間
AxureRP 實戰(四)如何自動獲取電腦日期和時間

到此,頁面載入時自動獲取日期時間就完成了!

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/222424.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-09 14:10
下一篇 2024-12-09 14:10

相關推薦

發表回復

登錄後才能評論