本文介绍如何使用HTML、CSS和JavaScript创建响应式计数器动画。通过简单的代码实现数字递增效果，适用于企业网站展示产品数量等场景。文章包含完整的HTML结构、CSS样式设计以及JavaScript动画逻辑，并提供源码下载链接。
本文将介绍如何利用 HTML、CSS 和 JavaScript 构建一个响应式的计数器动画效果。该效果应用广泛，可适配各类个人网站或企业网站。
此类计数器动画在商业网站中尤为常见。例如，若需在企业官网展示特定产品的数量统计，此方案是一个理想选择。
该动画通过数字计数效果实现视觉呈现。尽管开发者常借助第三方库实现此类响应式计数器，但本教程将演示如何仅通过原生 JavaScript 完成实现。
在线演示地址
项目基本结构
项目的目录结构如下所示：
1.计数动画的 HTML 代码
以下代码包含了所需的全部信息。此处构建了四个展示框，每个框内依次显示图标、数字倒计时以及对应的文本说明。
<div class="wrapper">
<div class="container">
<i class="fa-brands fa-html5"></i>
<span class="num" data-val="580">000</span>
<span class="text">HTML Project</span>
</div>
<div class="container">
<i class="fa-brands fa-node-js"></i>
<span class="num" data-val="360">000</span>
<span class="text">Javascript Project</span>
</div>
<div class="container">
<i class="fa-brands fa-java"></i>
<span class="num" data-val="248">000</span>
<span class="text">Java Project</span>
</div>
<div class="container">
<i class="fa-brands fa-python"></i>
<span class="num" data-val="120">000</span>
<span class="text">Python Project</span>
</div>
</div>2.使用 CSS 设计网页
以下 CSS 代码用于网页的整体设计。背景中引用了一张图片，您也可以根据需要替换为任意纯色背景。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: url("https://img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png" );
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.wrapper {
position: absolute;
width: 80vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
gap: 10px;}
3.Counter Up box的基本结构
目前，该盒子已构建完成。其中，backdrop-filter：blur (10px) 用于实现框体的背景模糊效果，width: 28vmin 和 height: 28vmin 分别定义了框体的宽度和高度，并辅以背景模糊处理。
.container {
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1em 0;
position: relative;
font-size: 16px;
border-radius: 0.5em;
backdrop-filter: blur(10px);
box-shadow: -1px -1px 4px #aaa9a9a2,
1px 1px 7px rgba(147, 149, 151, 0.671);
}
4.设计计数器动画的信息
接下来，使用以下代码对图标、数字及文本进行样式设计。图标颜色设定为蓝色（#42f9e8），文本和数字颜色为白色。您可根据实际需求调整这些颜色值。
i {
color: #42f9e8;
font-size: 3.8em;
text-align: center;
}
span.num {
color: #ffffff;
display: grid;
place-items: center;
font-weight: 600;
font-size: 3em;
}
span.text {
color: #e0e0e0;
font-size: 1em;
text-align: center;
pad: 0.7em 0;
font-weight: 400;
line-height: 0;
}
5.使用 CSS 使其具有响应性
为使计数器动画具备响应式特性，需应用以下 CSS 代码：
@media screen and (max-width: 1024px) {
.wrapper {
width: 85vw;
}
.container {
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
@media screen and (max-width: 768px) {
.wrapper {
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.container {
width: calc(50% - 40px);
height: 30vmin;
margin-bottom: 25px;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.wrapper {
gap: 15px;
}
.container {
width: 100%;
height: 25vmin;
font-size: 8px;
margin-bottom: 25px;
}
}
6.通过 JavaScript 激活计数器动画
前述设计工作已完成，并实现了动画的响应式布局。接下来是关键步骤：通过 JavaScript 代码激活计数器的动态效果。
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
至此，教程结束。希望上述代码和说明能帮助您成功创建响应式计数器动画。如需获取完整源码，请参考下方下载方式。
完整源码下载
GitHub 地址
关于使用 JavaScript 实现响应式计数器动画的文章介绍至此。如需了解更多 JavaScript 计数器动画相关内容，欢迎搜索本站历史文章或继续浏览后续教程。感谢支持！