如何让CSS计数器在不使用decimals的情况下，支持小数的动态变化？

2024-01-23 09:50:41

不得不说，CSS 计数器是个好东西。最近在几篇文章中都用到了 CSS 计数器，可以将 CSS 变量通过伪元素content动态展示出来，还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章：

这些文章中都详细介绍了 CSS 计数器的用法，以及如何用 CSS 计数器做出各种各样的动画效果。

CSS 计数器的官方文档中，明确指出了 CSS 计数器是不支持小数的。但是，我们可以通过一些技巧来实现 CSS 计数器的小数动态变化。

方法一：使用伪元素和content属性

这个方法很简单，就是在 CSS 计数器前面加上一个伪元素，然后用 content 属性来显示这个伪元素的内容。伪元素的内容可以是一个固定的值，也可以是一个变量。

例如，以下代码就演示了如何使用伪元素和 content 属性来实现 CSS 计数器的动态变化：

.counter {
  counter-reset: my-counter;
}

.counter::before {
  content: "计数器值：";
}

.counter-value {
  counter-increment: my-counter;
  content: counter(my-counter);
}

这个代码会创建一个名为 "counter" 的元素，并在该元素前面添加一个伪元素。伪元素的内容是 "计数器值：".

然后，我们使用 counter-increment 属性来增加计数器的值。最后，我们使用 content 属性来显示计数器的值。

方法二：使用 CSS 变量

这个方法与方法一类似，不过我们使用 CSS 变量来存储计数器的值。

例如，以下代码就演示了如何使用 CSS 变量来实现 CSS 计数器的动态变化：

:root {
  --my-counter: 0;
}

.counter {
  counter-reset: my-counter;
}

.counter-value {
  counter-increment: my-counter;
  content: var(--my-counter);
}

这个代码与方法一类似，不过我们使用 CSS 变量来存储计数器的值。

我们先在 :root 元素中定义一个名为 "my-counter" 的 CSS 变量，并将其初始值设置为 0。

然后，我们在 .counter 元素中使用 counter-reset 属性来重置计数器的值。最后，我们在 .counter-value 元素中使用 counter-increment 属性来增加计数器的值。

最后，我们使用 content 属性来显示 CSS 变量的值。

方法三：使用 JavaScript

这个方法相对复杂一些，不过它可以实现更复杂的小数动态变化。

例如，以下代码就演示了如何使用 JavaScript 来实现 CSS 计数器的小数动态变化：

const counter = document.querySelector('.counter');
let counterValue = 0;

counter.addEventListener('click', () => {
  counterValue += 0.1;
  counter.textContent = counterValue.toFixed(1);
});

这个代码首先获取 .counter 元素的引用，然后将计数器的初始值设置为 0。

然后，我们在 .counter 元素上添加一个点击事件监听器。当用户点击 .counter 元素时，我们就将计数器的值增加 0.1，并使用 toFixed() 方法将计数器的值保留一位小数。

最后，我们使用 textContent 属性来更新 .counter 元素的内容。