CSS实现一个计时器

源码

<h1>css 计时器</h1>
<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>
<style>
	html,
	body {
		margin: 0;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		gap: 15px;
		align-items: center;
		background: aliceblue;
	}
	@property --m {
		syntax: '<integer>';
		inherits: false;
		initial-value: 0;
	}
	@property --s {
		syntax: '<integer>';
		inherits: false;
		initial-value: 0;
	}
	@property --ms {
		syntax: '<integer>';
		inherits: false;
		initial-value: 0;
	}
	.counter {
		display: grid;
		gap: 10px;
		grid-template-areas:"clock clock" "start reset"
	}
	.clock {
		grid-area: clock;
		text-align: center;
		font-size: 60px;
		padding: .2em .5em;
		border: 5px solid rgba(255, 255, 255, .3);
		font-family: monospace;
		background: #3a3a3a;
		color: #fff;
		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);
		animation-play-state: paused;
	}
	.clock::before {
		content: counter(minitus, decimal-leading-zero) ':' counter(seconds, decimal-leading-zero) ':' counter(ms, decimal-leading-zero);
		text-shadow: 3px 3px 3px black;
	}
	.btn {
		text-align: center;
		padding: .5em;
		font-size: 24px;
		background-color: royalblue;
		color: #fff;
		grid-area: start;
		user-select: none;
		cursor: pointer;
		transition: .2s;
	}
	.btn:hover {
		filter: brightness(1.1);
	}
	.reset {
		grid-area: reset;
		background-color: #F44336;
	}
	.start::before {
		content: '开始';
	}
	:checked~.clock {
		animation-play-state: running;
	}
	:checked~.start::before {
		content: '暂停';
	}
	:checked~.reset {
		opacity: .65;
		pointer-events: none;
	}
	.reset:active+.clock {
		animation: none;
	}
	@keyframes minitus {
		to {
			--m: 59
		}
	}
	@keyframes seconds {
		to {
			--s: 59
		}
	}
	@keyframes ms {
		to {
			--ms: 99
		}
	}
</style>

兼容性

由于在实现中用到了CSS @property特性，这是CSS Houdini的一部分，目前只有 Chrome 支持。让人惊奇的是，Safari居然在前不久也支持了这个特性，未来可期。

会影响业务逻辑吗？

由于是伪元素渲染，页面上看不到任何数字，也就是无法直接通过innerText获取当前时间，但是，我们可以借助getComputedStyle来得到 CSS 变量

getComputedStyle($0).getPropertyValue('--ms')

所以通过 CSS 方式也是完全不影响业务逻辑的。

总结实现要点

1. CSS 现在很强大，不仅仅只是样式，还能做很多交互
2. CSS @property 可以使CSS变量支持动画
3. 数字时钟的变化其实是一个CSS变量不断递增循环的动画
4. CSS 点击操作状态可以通过:checked控制
5. Grid 布局可以很方便的控制各个元素的位置
6. 计时器开始和暂停其实就是动画的运行和暂停
7. 直接将动画取消就相当于重置了整个动画

来源：https://runjs.work/projects/6d3305ab2de14840

链接: https://www.fly63.com/course/33_1629