JavaScript 数字平滑变化实现方法 - 使用定时器创建流畅动画

数字平滑变化是指在一定时间内，数字逐渐变化而不是突然跳变。在 JavaScript 中，可以使用定时器 (setInterval 或 setTimeout) 实现数字平滑变化的效果。

以下是一个简单的示例：

// HTML 部分
<p id='num'></p>

// JS 部分
var num = 0;
var targetNum = 100;
var time = 1000; // 1 秒钟内完成变化
var interval = 10; // 每 10 毫秒变化一次
var step = (targetNum - num) / (time / interval);

var timer = setInterval(function() {
  num += step;
  document.getElementById('num').innerHTML = num.toFixed(0);
  if (num >= targetNum) {
    clearInterval(timer);
  }
}, interval);

在这个示例中，我们定义了一个初始数字 (num) 和目标数字 (targetNum)，并规定了变化所需的时间 (time) 和变化间隔 (interval)。我们计算出每一步变化的大小 (step)，然后使用定时器实现数字的平滑变化，直到达到目标数字为止。

在定时器函数中，我们将数字 (num) 加上变化的步长 (step)，然后将其更新到 HTML 中显示。当数字达到目标数字 (targetNum) 时，我们清除定时器 (timer)。通过调整变化所需的时间和变化间隔，我们可以控制数字变化的速度和平滑程度。