JavaScript实现计数器从0-10随机数值开始计数的问题

问题根因 #

1. 原生Math.random()返回的是[0, 1)区间的浮点数，无法直接得到0~10的数值，需要做范围映射。
2. 如果修改后完全无输出，绝大多数情况是你定义的srandom变量作用域错误，比如写在animateValue函数内部，导致全局调用时找不到变量触发报错，阻塞了脚本执行。

修复代码 #

你只需要修改随机数生成逻辑和调用部分即可，完整代码如下：

JavaScript 代码

/**
 * Increment value with random intervals.
 * @param {HTMLElement} obj - 要渲染计数的DOM元素对象
 * @param {number} start - 计数器起始值，会立即渲染
 * @param {number} end - 计数器终止值
 * @param {number} duration - 单轮迭代最大时长（当前函数逻辑未使用该参数）
 */
function animateValue(obj, start, end, duration) {
  let current = start;
  obj.innerHTML = current;
  const setIncrOut = () => {
    const time = Math.random() * 1000;
    setTimeout(() => {
      if (current < end) {
        current += 1;
        obj.innerHTML = current;
        setIncrOut();
      }
    }, time);
  }
  setIncrOut();
}

// 生成0~10的随机整数作为起始值，乘11是为了覆盖到10这个取值
const startRandom = Math.floor(Math.random() * 11);
document.querySelectorAll(".incr").forEach(obj => animateValue(obj, startRandom, 100000000));

HTML 代码

<div class="incr"></div>

可选调整 #

如果你需要起始值是0~10之间的浮点数而非整数，把随机数生成逻辑改为const startRandom = Math.random() * 10即可。
如果修改后仍有问题，可打开浏览器开发者工具的控制台面板查看具体报错信息定位问题。

内容的提问来源于stack exchange，提问作者r0naldinio