跟b站 @小k师兄学习一手CSS的计时器
1. 基本样式
注意，这里开始按钮使用伪类进行标签名字的设定，因为开始按钮点击以后有一个暂停的功能，就先不写死了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
align-items: center;
background: aliceblue;
}
.counter {
display: grid;
gap: 10px;
grid-template-areas: "clock clock" "start reset";
}
.clock {
grid-area: clock;
text-align: center;
font-size: 60px;
padding: 0.2em 0.5em;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-family: monospace;
background-color: #3a3a3a;
color: #fff;
}
.btn {
text-align: center;
padding: 0.5em;
font-size: 24px;
background-color: chocolate;
color: #fff;
grid-area: start;
user-select: none;
cursor: pointer;
transition: 0.2s;
border-radius: 5px;
}
.btn:hover {
filter: brightness(1, 1);
}
.reset {
grid-area: reset;
background-color: #f44336;
border-radius: 5px;
}
.start::before {
content: "开始";
}
</style>
</head>
<body>
<h1>计时器</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>
</body>
</html>
自定义属性显示时间
我们使用property属性创造三个数字，在时间样式里面使用counter-reset方法可以重置/创建计数器，配合伪元素显示。
此属性存在兼容性问题，但是已经兼容了很多主流的浏览器了。
<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: 0;
/* 默认值 */
initial-value: 0;
}
@property --s{
/* 类型 */
syntax: '<integer>';
/* 可继承 */
inherits: 0;
/* 默认值 */
initial-value: 0;
}
@property --ms{
/* 类型 */
syntax: '<integer>';
/* 可继承 */
inherits: 0;
/* 默认值 */
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: 0.2em 0.5em;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-family: monospace;
background-color: #3a3a3a;
color: #fff;
/* 使用 */
counter-set: minitus var(--m) seconds var(--s) ms var(--ms);
}
.clock::before{
content:counter(minitus) ':' counter(seconds) ':' counter(ms);
}
.btn {
text-align: center;
padding: 0.5em;
font-size: 24px;
background-color: chocolate;
color: #fff;
grid-area: start;
user-select: none;
cursor: pointer;
transition: 0.2s;
border-radius: 5px;
}
.btn:hover {
filter: brightness(1, 1);
}
.reset {
grid-area: reset;
background-color: #f44336;
border-radius: 5px;
}
.start::before {
content: "开始";
}
</style>
计时器的效果
我们使用动画效果实现定时器的初步效果，使用decimal-leading-zero配合counter使用达到个位数前面补0的效果。
<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: 0.2em 0.5em;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-family: monospace;
background-color: #3a3a3a;
color: #fff;
/* 重置/创建计数器 */
counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
animation: minitus 3600s steps(60, end) infinite,
seconds 60s steps(60, end) infinite, ms 1s steps(100, end) infinite;
}
@keyframes minitus {
to {
--m: 59;
}
}
@keyframes seconds {
to {
--s: 59;
}
}
@keyframes ms {
to {
--ms: 100;
}
}
.clock::before {
content: counter(minitus, decimal-leading-zero) ":"
counter(seconds, decimal-leading-zero) ":"
counter(ms, decimal-leading-zero);
}
.btn {
text-align: center;
padding: 0.5em;
font-size: 24px;
background-color: chocolate;
color: #fff;
grid-area: start;
user-select: none;
cursor: pointer;
transition: 0.2s;
border-radius: 5px;
}
.btn:hover {
filter: brightness(1, 1);
}
.reset {
grid-area: reset;
background-color: #f44336;
border-radius: 5px;
}
.start::before {
content: "开始";
}
</style>
开始、暂停、重置按钮的实现
我们使用动画里面的属性来控制按钮的暂停和开始事件，并且把最开始设置为停止状态。
<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: 0.2em 0.5em;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-family: monospace;
background-color: #3a3a3a;
color: #fff;
/* 重置/创建计数器 */
counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
animation: minitus 3600s steps(60, end) infinite,
seconds 60s steps(60, end) infinite, ms 1s steps(100, end) infinite;
animation-play-state: paused;
}
@keyframes minitus {
to {
--m: 59;
}
}
@keyframes seconds {
to {
--s: 59;
}
}
@keyframes ms {
to {
--ms: 100;
}
}
.clock::before {
content: counter(minitus, decimal-leading-zero) ":"
counter(seconds, decimal-leading-zero) ":"
counter(ms, decimal-leading-zero);
}
.btn {
text-align: center;
padding: 0.5em;
font-size: 24px;
background-color: chocolate;
color: #fff;
grid-area: start;
user-select: none;
cursor: pointer;
transition: 0.2s;
border-radius: 5px;
}
.btn:hover {
filter: brightness(1, 1);
}
.reset {
grid-area: reset;
background-color: #f44336;
border-radius: 5px;
}
.start::before {
content: "开始";
}
:checked ~ .clock {
animation-play-state: running;
}
:checked ~ .start::before {
content: "暂停";
}
:checked ~ .reset {
pointer-events: none;
opacity: 0.65;
}
.reset:active + .clock {
animation: none;
}
</style>