【时钟】教大家制作与系统时间匹配的时钟。 获赏10金币 基础教程

大马猴 超级版主 2020-6-2 2304

大家好,我是大马猴,今天给大家带来一个可以与系统时间匹配的时钟。

话不多说,先上动画效果展示:

教程开始:

一、先准备需要的组件,

1、指针(秒针、分针、时针)大家可以用场举行代替,也可以下载自己喜欢的样式。

2、然后准备圆形4个,前3个大小随意,但是这3个圆形尺寸要一致,第四个要小一些,可以把指针尾部都盖就可以。

3、动态面板一个,state1,复制一个,state2,用于改变状态。

4、几个矩形或者文本标签都可以,用于获取系统时间,以及分块显示时间。

5、文本标签,用于标记3点6点9点12点,大家可以多做一些,把1~12点都写出来也可以。

6、组件样式如果下:

二、开始制作,

1、首先对动态面板添加事件,载入时,设定动态面板为next,向后循环1000毫秒(1000毫秒=1秒)如图:

2、接下来我开始获取系统时间,这里需要用到一个函数,[[Now.toLocaleTimeString("en-GB")]]获取后的格式 例 12:08:27,我们在动态面板状态改变时候增加事件为:设置文本那个长条矩形为:[[Now.toLocaleTimeString("en-GB")]]如图:

此时大家可以F5预览一下,这样就看见系统时间在变动,1秒1秒的增加。如图

3、接下来我们让另外几个矩形获取这个长矩形的小时,分钟,秒,要用到substr函数,用于获取指定字符串的第几位,

然后还是在动态面板上添加事件,状态改变时,设定3个矩形分别为:[[LVAR1.substr(0,2)]],[[LVAR1.substr(3,2)]],[[LVAR1.substr(6,2)]]

意思是获取上图的09:52:14→substr(0,2)就是从第0位开始到第2位也就是获取的09在这矩形上,之后同上,就不一一解释了。如图:

此时F5效果如下:

现在我们已经获取到系统时间,并且已经分块显示了,接下来我们要制作时钟表盘了,以及让时钟指针都转动。

4、我们把3个圆形跟3个指针分别组合起来(把圆形的填充颜色设置为空),指着的尾巴一定要在圆形的中心点位上,否则转圈的时候可能回跑偏。如图:

5、现在开始对秒针,分针,时针,进行转圈设置,还是在面板状态改变时添加事件:设定旋转角度等于秒针*6(因为60秒正好转一圈,1圈=360度,秒针*6正好最大得到360度,也就是一圈)如图:

然后设定分针旋转为:分针一圈也是360度,所以也要用分针*6等于一圈,[[((LVAR1+LVAR2/60)*6).toFixed(0)]] ,但是我们要注意一个细节,秒针走动的同时,分针也会跟随移动,1分钟移动距离不大,但是会动,所以我们要用分针的角度+秒针/60的角度来判定,这个.toFixed(0)是不保留小数的意思,如果保留了,分针旋转会有问题,大家可以自己测试一下。如图:

接下来设定时针旋转,因为我们是24小时,每12小时时针转一圈,360/12=30度,也就是时针1小时要走30度,同理跟分针一样,也要渐渐的旋转,用到[[((LVAR1+LVAR2/60)*30).toFixed(0)]],时针+分针/60然后*30度,不保留小数,如图:

6、都设定完毕后,我们把这些简单移动一下,都重叠在一起,把动态面板跟长矩形隐藏,看看效果吧。把表盘制作出来,小圆盖在指针尾巴上,就可以了。大家可以根据自己的审美,更换表盘等。如图:

按下F5,看看效果吧!加油各位小伙伴们。有不懂的请联系我微信13278570090~

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (20)
  • yujiabian 普通用户 12天前
    0 引用 21
    6666
  • A 我站会 普通用户 2023-3-23
    0 引用 20
    3q
  • pandakill 普通用户 2022-6-16
    0 引用 19
    这个真的牛
  • 18809860773 普通用户 2022-4-23
    0 引用 18
    1
  • ccoo 普通用户 2021-9-3
    0 引用 17
    牛逼
  • 飞奔的母猪 普通用户 2020-9-16
    0 引用 16
    厉害
  • 宸枫 普通用户 2020-8-6
    0 引用 15
    谢谢
  • 失格_1595214255 普通用户 2020-7-29
    0 引用 14
    感谢分享
  • 123456ZZZ 普通用户 2020-7-28
    0 引用 13
    666
  • zaki2019 普通用户 2020-7-28
    0 引用 12
    学习
  • 暖暖_1594784296 普通用户 2020-7-24
    0 引用 11
    厉害了 
  • 陈晓聪 普通用户 2020-7-23
    0 引用 10
    厉害了
  • beyondzr 普通用户 2020-7-13
    0 引用 9
    感谢大哥
  • 宸枫 普通用户 2020-6-27
    0 引用 8
    厉害了
  • Teufel ༒ 普通用户 2020-6-11
    0 引用 7
    666
  • 张一 普通用户 2020-6-8
    0 引用 6
    1
  • NO.21 普通用户 2020-6-5
    0 引用 5
    厉害
  • 沈十三 管理员 2020-6-3
    0 引用 4
    感谢分享,已获得10金币奖励!
  • 大马猴 超级版主 2020-6-3
    0 引用 3
    符号 厉害了
    来了,大哥~
  • 符号 产品大牛 2020-6-3
    1 引用 2
    厉害了
返回