js监测到数字变化时，进行动态切换

你可以使用 JavaScript 的 MutationObserver 监听数字的变化，然后在数字发生变化时，进行动态切换。具体实现步骤如下：

1. 用 HTML 标签定义数字的显示区域，如 <div id="num">0</div>；

2. 使用 JavaScript 中的 MutationObserver 监听数字显示区域的变化；

3. 在 MutationObserver 的回调函数中，获取新的数字和旧的数字，并进行动态切换。

下面是一个示例代码：

HTML 代码：

<div id="num">0</div>

JavaScript 代码：

// 获取数字显示区域的元素对象
var numEl = document.getElementById('num');

// 创建 MutationObserver 对象
var observer = new MutationObserver(function(mutations) {
  // 遍历所有变化
  mutations.forEach(function(mutation) {
    // 检查是否是 textContent 的变化
    if (mutation.type === 'characterData') {
      // 获取新的数字和旧的数字
      var oldNum = parseInt(mutation.oldValue);
      var newNum = parseInt(mutation.target.textContent);
      // 进行动态切换
      animateNum(oldNum, newNum);
    }
  });
});

// 配置 MutationObserver
var config = { characterData: true, characterDataOldValue: true };

// 监听数字显示区域的变化
observer.observe(numEl, config);

// 定义动态切换函数
function animateNum(oldNum, newNum) {
  // 定义动态切换的时间间隔和步长
  var interval = 1000 / 60; // 60 fps
  var step = (newNum - oldNum) / (1000 / interval);
  // 定义动态切换的计时器
  var timer = setInterval(function() {
    // 更新数字显示区域的内容
    numEl.textContent = Math.round(oldNum);
    // 更新旧的数字
    oldNum += step;
    // 判断是否结束动态切换
    if ((step > 0 && oldNum >= newNum) || (step < 0 && oldNum <= newNum)) {
      // 结束计时器
      clearInterval(timer);
      // 更新数字显示区域的内容
      numEl.textContent = newNum;
    }
  }, interval);
}

// 测试代码，每隔 5 秒钟随机更新数字
setInterval(function() {
  numEl.textContent = Math.floor(Math.random() * 100);
}, 5000);

在上面的代码中，我们首先获取数字显示区域的元素对象，并创建 MutationObserver 对象来监听它的变化。在 MutationObserver 的回调函数中，我们检查是否是 textContent 的变化，如果是，就获取新的数字和旧的数字，并调用动态切换函数 animateNum 进行动态切换。在 animateNum 函数中，我们首先定义动态切换的时间间隔和步长，然后使用 setInterval 函数定时更新数字显示区域的内容，直到达到新的数字为止。最后，我们测试了一下代码，每隔 5 秒钟随机更新数字，以检查动态切换的效果。