利用Axure原型工具制作一个能获取本地时间的时钟。
工具/原料
原型工具:AxureRP9
效果图
1、能够获取本地时间,并准确计时。
实现逻辑
1、[[Now.getHours()]]函数:获取当前小时数
2、[[Now.getMinutes()]]函数:获取当前分钟数
3、[[Now.getSeconds()]]函数:获取当前秒数
4、获取到本地时间后,指针是有初始角度的:设当前时间为X:Y:Z(即X点Y分Z秒)时针角度:(X×30+Y×0.5)deg分针角度:Y×6deg秒针角度:Z×6deg
5、指针旋转角度:秒针走60秒(360deg),分针走6deg,时针旋转0.5deg
操作步骤
1、寻找钟表表盘的素材,画出时分秒的指针,注意指针长度,使三个指针的中心点重合,此处需要如下元件,其中时分秒的text用于控制指针的旋转,元件如下图:
2、在页面增加交互事件当页面载入时设置文本text时到[[Now.getHou筠续师诈rs()]]text分到[[Now.getMin锇栀劐箨utes()]]text秒到[[Now.getSeconds()]]设置旋转时针to[[Now.getHours()*30+Now.getMinutes()/2]]分针to[[Now.getMinutes()*6]]秒针to[[Now.getSeconds()*6]]ps.此时,当页面加载时,我们让指针旋转到了当前时间的角度
3、在text秒增加交互事件文字改变时if元件文字text秒=“59”等待咯悝滩镞1000ms旋转秒针顺时针by6°旋转分针顺时针by6°旋转骀旬沃啭时针顺时针by0.5°设置文本text秒到“0”设置文本text分到“[[LVAR1+1]]”(注意:在设置text分的文本时,需要设置局部变量,LVAR1=元件文字text分)ifelse等待1000ms旋转秒针顺时针by6°设置文本text秒到“[[LVAR1+1]]”(注意:在设置text秒的文本时,需要设置局部变量,LVAR1=元件文字text秒)
4、在text分增加交互事件文字改变时if元件文字text分=“59”等待瀵鸦铙邮60000ms设置文本te旌忭檀挢xt分到“0”设置文本text时到“[[LVAR1+1]]”(注意:在设置text时的文本时,需要设置局部变量,LVAR1=元件文字text时)
5、在text时增加交互事件文字改变时if元件文字text时=“23”等待3600000ms设置文本text时到“0”OK!搞定!