Axure RP 9 教程—能获取本地时间时钟

 时间:2024-09-21 15:49:30

利用Axure原型工具制作一个能获取本地时间的时钟。

工具/原料

原型工具:AxureRP9

效果图

1、能够获取本地时间,并准确计时。

Axure RP 9 教程—能获取本地时间时钟

实现逻辑

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用于控制指针的旋转,元件如下图:

Axure RP 9 教程—能获取本地时间时钟

Axure RP 9 教程—能获取本地时间时钟

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!搞定!

AnimateCC如何使用声音文件(2) 铃铛图标设计 Axure8怎么清空历史记录 axure怎么统计多行文本框输入的文字数? Animate/FLASH如何快速绘制标准的表格
热门搜索
中国机长电影免费播放 美丽的草原图片 密室逃脱电影 袭胸图片 鼠标手图片