前言
去 JS 化实现计时器，其实通过这种案例蛮可以探索点。今日前端早读课文章由 @XboxYan 分享，公号：前端侦探授权。
前端早读课：有用的文章，值得看第二遍
正文从这开始～～
CSS 现在可不仅仅只是改一个颜色这么简单，还可以做很多交互，比如做一个功能齐全的计时器？
样式上并不复杂，主要是几个交互的地方
数字时钟的变化
开始、暂停操作
重置操作
如何仅使用 CSS 来实现这样的功能呢？一起看看吧
一、数字时钟的变化
这个功能之前在这篇文章中有详细介绍，有兴趣的可以回顾一下：还在使用定时器吗？CSS 也能实现电子时钟
这里简单介绍一下实现原理
在以前，如果要实现数字的递增变化，可能需要提前准备好这些数字，例如像这样
<span>
<i>1</i>
<i>2</i>
...
<i>59</i>
</span>或者用伪元素创建也行
span::before{
content: '1\A 2\A 3\A ... 59'
}这种方式需要创建多个标签，略微繁琐，也不易扩展。现在有更简洁的方式可以实现了，那就是 CSS @property。这是干什么的呢？简单来讲，可以自定义属性，在这个例子中，可以让数字像颜色一样进行过渡和动画，可能不太懂，直接看例子吧
假设 HTML 是这样的
<span>我们让这个自定义变量在页面中展示出来，单纯的 content 无法直接显示自定义变量，需要借助计数器，有兴趣的可以参考这篇文章：小 tips: 如何借助 content 属性显示 CSS var 变量值
span::after{
counter-reset: num var(--num);
content: counter(num);
}现在可以通过:hover 改变这个数字
span:hover::after{
--num: 59
}很生硬的从 0 变成 59 了，非常符合常规，因为 --num 并不支持过渡动画。如果利用 CSS property，情况就不一样了，需要改造的地方很少，先定义一下 --num，然后给这个变量一个过渡时间，如下
@property --num {
syntax: '<integer>';
inherits: false;
initial-value: 0;
}
span::after{
transition: 1s --num;
}神奇的一幕发生了
看着好像不可思议？可以这么理解，通过 @property 定义后，这个变量本身可以单独设置过渡了，而不再取决于一些仅支持过渡的属性（color、width 等）。还可以使用动画，如下
@keyframes num {
to {
--num: 10
}
}
span{
animation: num 1s infinite steps(10);
}数字变化的基本原理就是这样了，一个无限循环的 CSS 动画！
回到这里，这里需要的是一个秒表，分为 “分”、“秒”、“毫秒”（这里的毫秒就用 1/100 秒来代替），3 个数字的动画时长都不一致，所以需要定义 3 个 CSS 变量，完整实现如下
@keyframes minitus {
to {
--m: 59
}
}
@keyframes seconds {
to {
--s: 59
}
}
@keyframes ms {
to {
--ms: 99
}
}
span{
counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
animation: minitus 3600s infinite steps(60, end),
seconds 60s infinite steps(60, end),
ms 1s infinite steps(100, end);
}
span::before{
content: counter(minitus, decimal-leading-zero) ':' counter(seconds, decimal-leading-zero) ':' counter(ms, decimal-leading-zero);
}这样就得到了一个自动运行的秒表
二、开始、暂停操作
首先思考一下，CSS 需要怎样记住点击操作？答案就是 input type="checkbox"（通过 label 关联），可以这样来布局
<div class="counter">
<input type="checkbox" id="start" hidden>
<label class="btn start" for="start"></label>
<label class="btn reset">重置</label>
<div class="clock"></div>
</div>因为需要通过 input:cheked 来控制秒表的状态，需要借助后置兄弟选择器～来实现，所以 input 需要在前面（当然，现在有了:has 也可以不需要这样）。
这里可以通过 grid 布局来灵活摆放各个模块的位置
.counter{
display: grid;
grid-template-areas:
"clock clock"
"start reset"
}
.start{
/**/
grid-area: start;
}
.reset{
/**/
grid-area: reset;
}简单美化以后，可以得到这样的效果
然后，由于秒表的运行其实就是一个 CSS 动画，所以我们可以直接用:cheked 来控制动画的状态，默认设置成暂停的，还有按钮文字也可以通过::before 来生成，实现如下
.clock{
animation-play-state: paused;/*默认暂停*/
}
.start::before{
content: '开始';
}
:checked~.start::before{
content: '暂停';
}
:checked~.clock{
animation-play-state: running;
}这样就可以通过按钮手动控制开始和暂停了
三、重置操作
重置看起来好像有点麻烦，有点无从下手。
其实重置一个动画非常简单，直接将动画取消就可以了，也就是相当于重置了动画，如下
.reset:active+.clock{
animation: none;
}其次，重置一般只有在暂停时才可用，所以还需要用前面的:checked 禁用一下，并且视觉上可以透明度降低一点，实现如下
:checked~.reset{
opacity: .65;
pointer-events: none;
}这样就得到了文章开头所示的效果
当然，你还可以使用自定义字体，比如 DigitalNumbers
完整代码可以查看以下任意链接：https://codepen.io/xboxyan/pen/BaqjRaK
四、会影响业务逻辑吗？
还有一点，有同学担心 CSS 只是视觉层面的，可能会影响业务逻辑。
确实，由于是伪元素渲染，页面上看不到任何数字，也就是无法直接通过 innerText 获取当前时间，但是，我们可以借助 getComputedStyle 来得到 CSS 变量
getComputedStyle($0).getPropertyValue('--ms')实时获取如下
所以通过 CSS 方式也是完全不影响业务逻辑的
五、兼容性和总结
由于在实现中用到了 CSS @property 特性，这是 CSS Houdini 的一部分，目前只有 Chrome 支持（可惜了