axure时间选择器控件(axure原型案例作品)

80酷酷网    80kuku.com

我们在做页面交互设计时,如何自动获取电脑的日期和时间呢?像下图这样,让设计的产品更有真实感:

axure时间选择器控件(axure原型案例作品)(图1)

axure时间选择器控件(axure原型案例作品)(图2)

本次教程以上图的日期时间格式为例:“YYYY-MM-DD hh:mm:ss”做讲解。

首先,拖入文本标签元件 –> 命名为:”date&time” –> 点击“新建交互” –> 形状选择“载入时” –> 元件动作选择“设置文本” –> 目标选择“当前元件” –> 点击“fx”,弹出编辑文本弹出框 –>

axure时间选择器控件(axure原型案例作品)(图3)

axure时间选择器控件(axure原型案例作品)(图4)

axure时间选择器控件(axure原型案例作品)(图5)

axure时间选择器控件(axure原型案例作品)(图6)

axure时间选择器控件(axure原型案例作品)(图7)

axure时间选择器控件(axure原型案例作品)(图8)

axure时间选择器控件(axure原型案例作品)(图9)

axure时间选择器控件(axure原型案例作品)(图10)

axure时间选择器控件(axure原型案例作品)(图11)

axure时间选择器控件(axure原型案例作品)(图12)

axure时间选择器控件(axure原型案例作品)(图13)

axure时间选择器控件(axure原型案例作品)(图14)

点击“插入变量或函数…” –> 依次点击“getFullYear()”、“getMonth()”、“getDate()”,“getHours()”、“getMinutes()”、“getSeconds()”,年、月、日中间用“-”隔开,小时、分钟、秒之间用“:”隔开,日期和时间直接用空格间隔 –>

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

axure时间选择器控件(axure原型案例作品)(图15)

axure时间选择器控件(axure原型案例作品)(图16)

axure时间选择器控件(axure原型案例作品)(图17)

axure时间选择器控件(axure原型案例作品)(图18)

点击“确定”后 –> “完成” –>

axure时间选择器控件(axure原型案例作品)(图19)

axure时间选择器控件(axure原型案例作品)(图20)

axure时间选择器控件(axure原型案例作品)(图21)

axure时间选择器控件(axure原型案例作品)(图22)

到此,页面加载时自动获取日期时间就完成了!

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: