利用css做时钟

在网上看到的一种利用css3做出定时器的方式，就把他记录下来，偶尔可以翻出来看看。代码如下：

html代码

<div class="timer">
    <span class="hours"></span>
    <a class="split">:</a>
    <span class="minutes"></span>
    <a class="split">:</a>
    <span class="seconds"></span>
</div>

js代码

这段代码的作用是让计时器可以从当前时间开始计算，当在css中利用变量去初始化数值时候，会出现到达30秒时候就分钟就跟着变化，这一段代码可以达到解决这种问题。这种情况的出现是因为在css代码中分钟的计算（例如 26 + 30/60 = 26.5）被取舍了所以导致提前发生了变化。

const d = new Date()
const h = d.getHours()
const m = d.getMinutes()
const s = d.getSeconds()
document.body.style.setProperty('--ds', s)
document.body.style.setProperty('--dm', m + s/60)
document.body.style.setProperty('--dh', h + m/60)

css代码

1、代码中重要的关键字是@property，通过该字段申明属性，其中，syntax是定义属性的类型，inherits是决定是否可以继承，initial-value则是初始化数值
2、需要注意的是，虽然下面代码中写了在全局:root中申明了变量，但是有问题的是里面的变量申明后并没有起作用，欢迎在评论区中解答一下这个问题。如果你也同我一样没能解决，可以通过直接将数值代入或者是使用上方js代码解决。
3、counter-reset是css定义计时器的属性。
4、在伪元素::after中content属性中的decimal-leading-zero属性作用是使得计时器的数值能够在个位数时填充“0”

@property --h {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
@property --m {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
@property --s {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
/* .hours::after {
    counter-reset: hour var(--h);
    content: counter(hour);
}
.minutes::after {
    counter-reset: minutes var(--m);
    content: counter(minutes)
}
.seconds::after {
    counter-reset: seconds var(--s);
    content: counter(seconds)
} */
@keyframes hours {
    to {
        --h: 24;
    }
}
@keyframes minutes {
    to {
        --m: 60;
    }
}
@keyframes seconds {
    to {
        --s: 60;
    }
}
/* .hours::after {
    counter-reset: hours var(--h);
    content: counter(hours, decimal-leading-zero);
    animation: hours calc(60s * 60 * 24) infinite steps(24);
}
.minutes::after {
    counter-reset: minutes var(--m);
    content: counter(minutes, decimal-leading-zero);
    animation: minutes calc(60s * 60) infinite steps(60);
}
.seconds::after {
    counter-reset: seconds var(--s);
    content: counter(seconds, decimal-leading-zero);
    animation: seconds calc(60s) infinite steps(60);
} */
/* 指定开始时间 */
:root {
    --dh: 19;
    --dm: 26;
    --ds: 30;
}
.hours::after {
    counter-reset: hours var(--h);
    content: counter(hours, decimal-leading-zero);
    animation: hours calc(60s * 60 * 24) infinite steps(24);
    animation-delay: calc( -60s * 60 * var(--dh) );
}
.minutes::after {
    counter-reset: minutes var(--m);
    content: counter(minutes, decimal-leading-zero);
    animation: minutes calc(60s * 60) infinite steps(60);
    animation-delay: calc( -60s * var(--dm) );
}
.seconds::after {
    counter-reset: seconds var(--s);
    content: counter(seconds, decimal-leading-zero);
    animation: seconds 60s infinite steps(60);
    animation-delay: calc( -1s * var(--ds) );
}
@keyframes shark {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
.split {
    animation: shark 1s step-end infinite;
}

如果有错误的地方，欢迎指出，谢谢。