查看“︁微件:CountUp”︁的源代码

<includeonly>
<span class="countup" style="
  font-size:<!--{$size|default:'36'}-->px;
  font-weight:bold;
  color:<!--{$color|default:'#2E7D32'}-->;
  display:inline-block;
">
  0
</span>
<script>
(function() {
  const el = document.currentScript.parentElement;
  const target = parseInt('<!--{$target|default:'100'}-->');
  const duration = parseInt('<!--{$duration|default:'2000'}-->');
  const suffix = '<!--{$suffix|default:''}-->';
  
  if (isNaN(target) || target <= 0) return;
  
  let start = 0;
  const startTime = performance.now();
  
  function update() {
    const elapsed = performance.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
    const current = Math.round(start + (target - start) * eased);
    el.textContent = current + suffix;
    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
      el.textContent = target + suffix;
    }
  }
  
  update();
})();
</script>
</includeonly>