论坛 › 马黑黑教程专版 › 原生 css+html 时钟走起

马黑黑 发表于 2023-5-28 11:39

原生 css+html 时钟走起

本帖最后由 马黑黑 于 2023-5-28 11:49 编辑 <br /><br /><style>
#clock {
    width: var(--ww);
    height: var(--ww);
    background: lightblue;
    border: 12px solid olive;
    border-radius: 50%;
    user-select: none;
    display: grid;
    place-items: center;
    position: relative;
    --ww: 200px;
    --num_ww: 26px;
    --rr: calc((var(--ww) - var(--num_ww)) / 2);
}
hand, num { position: absolute; transform-origin: 50% 100%; }
num {
        width: var(--num_ww);
        height: var(--num_ww);
        font: bold 20px / var(--num_ww) sans-serif;
        text-align: center;
        left: calc(var(--rr) + (var(--rr) * cos(var(--deg))));
        top: calc(var(--rr) + (var(--rr) * sin(var(--deg))));
}
num:nth-of-type(1) { --deg: 270deg; }
num:nth-of-type(2) { --deg: 300deg; }
num:nth-of-type(3) { --deg: 330deg; }
num:nth-of-type(4) { --deg: 0deg; }
num:nth-of-type(5) { --deg: 30deg; }
num:nth-of-type(6) { --deg: 60deg; }
num:nth-of-type(7) { --deg: 90deg; }
num:nth-of-type(8) { --deg: 120deg; }
num:nth-of-type(9) { --deg: 150deg; }
num:nth-of-type(10) { --deg: 180deg; }
num:nth-of-type(11) { --deg: 210deg; }
num:nth-of-type(12) { --deg: 240deg; }
hand:nth-of-type(1) {
        width: 6px;
        height: calc(var(--ww) / 2 - 40px);
        background: rgba(200,200,0,.8);
        top: 40px;
        animation: rot 43200s var(--hDelay) infinite linear;
}
hand:nth-of-type(2) {
        width: 4px;
        height: calc(var(--ww) / 2 - 20px);
        background: rgba(300,300,300,.8);
        top: 20px;
        animation: rot 3600s var(--mDelay) infinite linear;
}
hand:nth-of-type(3) {
        width: 2px;
        height: calc(var(--ww) / 2 - 6px);
        background: rgba(100,100,0,.8);
        top: 6px;
        animation: rot 60s var(--sDelay) infinite linear;
}
hand:nth-of-type(4) {
        width: 16px;
        height: 16px;
        background: rgb(100,100,0);
        border-radius: 50%;
}
@keyframes rot { to {transform: rotate(1turn); } }
</style>

<div id="clock">
        <num>12</num>
        <num>1</num>
        <num>2</num>
        <num>3</num>
        <num>4</num>
        <num>5</num>
        <num>6</num>
        <num>7</num>
        <num>8</num>
        <num>9</num>
        <num>10</num>
        <num>11</num>
        <hand></hand>
        <hand></hand>
        <hand></hand>
        <hand></hand>
</div>

<p><br><br><br><br></p>

<script>
let now = new Date();
let hours = -3600 * (now.getHours() % 12), mins = -60 * now.getMinutes(), secs = -1 * now.getSeconds();
clock.style.setProperty('--sDelay', `${secs}s`);
clock.style.setProperty('--mDelay', `${mins}s`);
clock.style.setProperty('--hDelay', `${(hours + mins)}s`);
</script>

马黑黑 发表于 2023-5-28 11:40

代码
<style>
#clock {
    width: var(--ww);
    height: var(--ww);
    background: lightblue;
    border: 12px solid olive;
    border-radius: 50%;
    user-select: none;
    display: grid;
    place-items: center;
    position: relative;
    --ww: 200px;
    --num_ww: 26px;
    --rr: calc((var(--ww) - var(--num_ww)) / 2);
}
hand, num { position: absolute; transform-origin: 50% 100%; }
num {
        width: var(--num_ww);
        height: var(--num_ww);
        font: bold 20px / var(--num_ww) sans-serif;
        text-align: center;
        left: calc(var(--rr) + (var(--rr) * cos(var(--deg))));
        top: calc(var(--rr) + (var(--rr) * sin(var(--deg))));
}
num:nth-of-type(1) { --deg: 270deg; }
num:nth-of-type(2) { --deg: 300deg; }
num:nth-of-type(3) { --deg: 330deg; }
num:nth-of-type(4) { --deg: 0deg; }
num:nth-of-type(5) { --deg: 30deg; }
num:nth-of-type(6) { --deg: 60deg; }
num:nth-of-type(7) { --deg: 90deg; }
num:nth-of-type(8) { --deg: 120deg; }
num:nth-of-type(9) { --deg: 150deg; }
num:nth-of-type(10) { --deg: 180deg; }
num:nth-of-type(11) { --deg: 210deg; }
num:nth-of-type(12) { --deg: 240deg; }
hand:nth-of-type(1) {
        width: 6px;
        height: calc(var(--ww) / 2 - 40px);
        background: rgba(200,200,0,.8);
        top: 40px;
        animation: rot 43200s var(--hDelay) infinite linear;
}
hand:nth-of-type(2) {
        width: 4px;
        height: calc(var(--ww) / 2 - 20px);
        background: rgba(300,300,300,.8);
        top: 20px;
        animation: rot 3600s var(--mDelay) infinite linear;
}
hand:nth-of-type(3) {
        width: 2px;
        height: calc(var(--ww) / 2 - 6px);
        background: rgba(100,100,0,.8);
        top: 6px;
        animation: rot 60s var(--sDelay) infinite linear;
}
hand:nth-of-type(4) {
        width: 16px;
        height: 16px;
        background: rgb(100,100,0);
        border-radius: 50%;
}
@keyframes rot { to {transform: rotate(1turn); } }
</style>

<div id="clock">
        <num>12</num>
        <num>1</num>
        <num>2</num>
        <num>3</num>
        <num>4</num>
        <num>5</num>
        <num>6</num>
        <num>7</num>
        <num>8</num>
        <num>9</num>
        <num>10</num>
        <num>11</num>
        <hand></hand>
        <hand></hand>
        <hand></hand>
        <hand></hand>
</div>

<script>
let now = new Date();
let hours = -3600 * (now.getHours() % 12), mins = -60 * now.getMinutes(), secs = -1 * now.getSeconds();
clock.style.setProperty('--sDelay', `${secs}s`);
clock.style.setProperty('--mDelay', `${mins}s`);
clock.style.setProperty('--hDelay', `${(hours + mins)}s`);
</script>

马黑黑 发表于 2023-5-28 11:49

本帖最后由 马黑黑 于 2023-5-28 11:53 编辑

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

原理：

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

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

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

樵歌 发表于 2023-5-28 12:23

真的跟时间同步了，牛呵

马黑黑 发表于 2023-5-28 12:29

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

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

红影 发表于 2023-5-28 12:43

黑黑又弄出一种时钟来，太厉害了{:4_199:}

一斛珠 发表于 2023-5-28 15:18

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

梦油 发表于 2023-5-28 17:02

走时精准，与北京时间同步。真有你的！{:4_199:}

醉美水芙蓉 发表于 2023-5-28 17:21

马黑黑 发表于 2023-5-28 17:33

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

{:4_190:}

梦缘 发表于 2023-5-28 18:00

欣赏感谢分享，问好！{:4_187:}

马黑黑 发表于 2023-5-28 18:20

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

{:4_180:}

樵歌 发表于 2023-5-28 19:04

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

真太神奇了。尾大的黑师{:4_199:}

马黑黑 发表于 2023-5-28 20:08

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

嗯，尾大不掉

南无月 发表于 2023-5-28 20:17

大写的服，黑师厉害{:4_187:}

小文 发表于 2023-5-28 21:01

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

马黑黑 发表于 2023-5-28 21:28

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

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

小文 发表于 2023-5-28 21:29

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

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

樵歌 发表于 2023-5-28 21:31

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

哪能呢，必须翘高高的{:4_189:}

马黑黑 发表于 2023-5-28 21:32

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

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

查看完整版本: 原生 css+html 时钟走起