数据统计卡片

预览

四张统计卡排列在网格中，当您滚动时，数字从零开始计数。

🚀

Active Users

⭐

Satisfaction

🌍

Countries

⚡

Uptime

用例和功能

着陆页性能部分：有效传达浏览量、客户满意度、国家/地区数量等指标。
使用 Intersection Observer：动画在第一次滚动和可见时触发。
小数点支持：通过“data-decimals”属性支持整数和小数计数器。
使用 CSS 变量进行颜色管理：您可以使用 --accent 变量来分隔每张卡片的强调色。

设计和用户体验要点

缓出动画：使用三次隐藏函数的独特缓出不是“三次贝塞尔曲线”，而是数值停止加速的自然运动。
渐变文本：使用-webkit-background-clip: text，数字本身变成渐变，营造出高级感。
使用toLocaleString()格式化数字：根据区域设置显示数字，例如12847 → 12,847。

如何定制

改变计数速度 （毫秒）:

// 缩短动画时间
// animateCounter(el, target, suffix, decimals, 1000);

// 延长动画时间
// animateCounter(el, target, suffix, decimals, 3000);

更改小数位数:

<!-- 3 位小数 -->
<span class="stat-number" data-target="99.999" data-suffix="%" data-decimals="3">0%</span>

实现代码

<div class="stats-grid">
<div class="stat-card stat-card-1">
  <div class="stat-icon">🚀</div>
  <span class="stat-number" data-target="12847" data-suffix="" data-decimals="0">0</span>
  <div class="stat-label">Active Users</div>
</div>
<!-- 其他卡的类似结构 -->
</div>

<style>
`
.stat-number {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-card-1 { --accent: #6366f1; --accent-light: #8b5cf6; }
`
</style>

<script>
(function() {
function animateCounter(el, target, suffix, decimals, duration) {
  var start = null;
  function step(ts) {
    if (!start) start = ts;
    var p = Math.min((ts-start)/duration,1);
    var v = (1-Math.pow(1-p,3))*target;
    el.textContent=(decimals>0?v.toFixed(decimals):Math.floor(v).toLocaleString())+suffix;
    if(p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}
var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(e) {
    if (e.isIntersecting) {
      var el = e.target;
      if (!el.classList.contains('animated')) {
        el.classList.add('animated');
        animateCounter(el, parseFloat(el.dataset.target), el.dataset.suffix || '', parseInt(el.dataset.decimals || '0'), 2000);
      }
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('.stat-number').forEach(function(el) {
  observer.observe(el);
});
})();
</script>

浏览器兼容性状态

浏览器	兼容性状态
Chrome 51+	✅ 完全兼容
火狐 55+	✅ 完全兼容
Safari 12.1+	✅ 兼容
边缘 79+	✅ 完全兼容

Intersection Observer API 仅在现代浏览器中支持 Nenewa。如果您需要 IE11 支持，则需要使用 polyfill。��