原生 css+html 时钟走起

马黑黑

12 1 2 3 4 5 6 7 8 9 10 11

马黑黑

代码

1. <style>
   
2. #clock {
   
3.     width: var(--ww);
   
4.     height: var(--ww);
   
5.     background: lightblue;
   
6.     border: 12px solid olive;
   
7.     border-radius: 50%;
   
8.     user-select: none;
   
9.     display: grid;
   
10.     place-items: center;
    
11.     position: relative;
    
12.     --ww: 200px;
    
13.     --num_ww: 26px;
    
14.     --rr: calc((var(--ww) - var(--num_ww)) / 2);
    
15. }
    
16. hand, num { position: absolute; transform-origin: 50% 100%; }
    
17. num {
    
18.         width: var(--num_ww);
    
19.         height: var(--num_ww);
    
20.         font: bold 20px / var(--num_ww) sans-serif;
    
21.         text-align: center;
    
22.         left: calc(var(--rr) + (var(--rr) * cos(var(--deg))));
    
23.         top: calc(var(--rr) + (var(--rr) * sin(var(--deg))));
    
24. }
    
25. num:nth-of-type(1) { --deg: 270deg; }
    
26. num:nth-of-type(2) { --deg: 300deg; }
    
27. num:nth-of-type(3) { --deg: 330deg; }
    
28. num:nth-of-type(4) { --deg: 0deg; }
    
29. num:nth-of-type(5) { --deg: 30deg; }
    
30. num:nth-of-type(6) { --deg: 60deg; }
    
31. num:nth-of-type(7) { --deg: 90deg; }
    
32. num:nth-of-type(8) { --deg: 120deg; }
    
33. num:nth-of-type(9) { --deg: 150deg; }
    
34. num:nth-of-type(10) { --deg: 180deg; }
    
35. num:nth-of-type(11) { --deg: 210deg; }
    
36. num:nth-of-type(12) { --deg: 240deg; }
    
37. hand:nth-of-type(1) {
    
38.         width: 6px;
    
39.         height: calc(var(--ww) / 2 - 40px);
    
40.         background: rgba(200,200,0,.8);
    
41.         top: 40px;
    
42.         animation: rot 43200s var(--hDelay) infinite linear;
    
43. }
    
44. hand:nth-of-type(2) {
    
45.         width: 4px;
    
46.         height: calc(var(--ww) / 2 - 20px);
    
47.         background: rgba(300,300,300,.8);
    
48.         top: 20px;
    
49.         animation: rot 3600s var(--mDelay) infinite linear;
    
50. }
    
51. hand:nth-of-type(3) {
    
52.         width: 2px;
    
53.         height: calc(var(--ww) / 2 - 6px);
    
54.         background: rgba(100,100,0,.8);
    
55.         top: 6px;
    
56.         animation: rot 60s var(--sDelay) infinite linear;
    
57. }
    
58. hand:nth-of-type(4) {
    
59.         width: 16px;
    
60.         height: 16px;
    
61.         background: rgb(100,100,0);
    
62.         border-radius: 50%;
    
63. }
    
64. @keyframes rot { to {transform: rotate(1turn); } }
    
65. </style>
    
66. 
    
67. <div id="clock">
    
68.         <num>12</num>
    
69.         <num>1</num>
    
70.         <num>2</num>
    
71.         <num>3</num>
    
72.         <num>4</num>
    
73.         <num>5</num>
    
74.         <num>6</num>
    
75.         <num>7</num>
    
76.         <num>8</num>
    
77.         <num>9</num>
    
78.         <num>10</num>
    
79.         <num>11</num>
    
80.         <hand></hand>
    
81.         <hand></hand>
    
82.         <hand></hand>
    
83.         <hand></hand>
    
84. </div>
    
85. 
    
86. <script>
    
87. let now = new Date();
    
88. let hours = -3600 * (now.getHours() % 12), mins = -60 * now.getMinutes(), secs = -1 * now.getSeconds();
    
89. clock.style.setProperty('--sDelay', `${secs}s`);
    
90. clock.style.setProperty('--mDelay', `${mins}s`);
    
91. clock.style.setProperty('--hDelay', `${(hours + mins)}s`);
    
92. </script>

复制代码

马黑黑

各指针在CSS关键帧动画的驱动下循环永动，时钟启动之时，JS根据当前时间给所有指针做旋转定位。

原理：

时、分、秒三个指针，只做一个关键帧运动，即循环执行旋转一圈的动作，使用石英钟的行走方式（不分步）。不同的是，各个指针：

一、旋转一圈的用时不同：时针 432000s，分钟 3600s，秒钟 60s；

二、负延时时间不同：JS负责计算这个，用负延时的方式让指针在执行关键帧动画 rot 之初使用负延时。CSS元素执行关键帧动画，负延时表示立即执行且提前进入第一个运行周期的第 N 秒（或毫秒）的状态，从而可以让指针旋转到对应当前时、分、秒的位置。

樵歌

真的跟时间同步了，牛呵

马黑黑

樵歌 发表于 2023-5-28 12:23
真的跟时间同步了，牛呵

以前也做过的，表盘的布局，实现原理这个是第三种

红影

黑黑又弄出一种时钟来，太厉害了

一斛珠

啥也不啰嗦，就两字，佩服！

梦油

走时精准，与北京时间同步。真有你的！

马黑黑

醉美水芙蓉 发表于 2023-5-28 17:21
黑黑老师厉害！

梦缘

欣赏感谢分享，问好！

马黑黑

梦缘 发表于 2023-5-28 18:00
欣赏感谢分享，问好！

樵歌

马黑黑 发表于 2023-5-28 12:29
以前也做过的，表盘的布局，实现原理这个是第三种

真太神奇了。尾大的黑师

马黑黑

樵歌 发表于 2023-5-28 19:04
真太神奇了。尾大的黑师

嗯，尾大不掉

南无月

大写的服，黑师厉害

小文

好喜欢这个贴子，前几天还在学习，想做个好看的个性钟，现在好了，可以借用的。谢谢大师分享！

马黑黑

小文 发表于 2023-5-28 21:01
好喜欢这个贴子，前几天还在学习，想做个好看的个性钟，现在好了，可以借用的。谢谢大师分享！

这里做的时钟有好几个实现方式，你可以搜查一下

小文

马黑黑 发表于 2023-5-28 21:28
这里做的时钟有好几个实现方式，你可以搜查一下

谢谢大师提点，敬酒！回头我慢慢学习下，有点笨，所以慢慢看。

樵歌

马黑黑 发表于 2023-5-28 20:08
嗯，尾大不掉

哪能呢，必须翘高高的

马黑黑

小文 发表于 2023-5-28 21:29
谢谢大师提点，敬酒！回头我慢慢学习下，有点笨，所以慢慢看。

CSS部分，总有一些小技巧，需要慢慢领会；CSS虽然不一定好理解，但都是基于基本原理的