javascript - 添加数字而不是添加增量

Question

我有一个小脚本，可以在给定时间段内将数字递增。如果增加一个 value++ 可行，如果我想添加 math.random 函数生成的类型的另一个值而不是添加，请添加到现有值。我怎样才能改变这个？我希望生成的数字添加到 innerHTML 中的现有值。

document.getElementById("data-gen").innerHTML = Math.floor((Math.random() * 100000) + 1) + Math.floor((Math.random() * 100) + 1);

nowResources = function() {
  document.getElementById("data-gen").innerHTML += Math.floor((Math.random() * 10) + 1);
  setTimeout(nowResources, 1000);
}

nowResources();

<span id="data-gen" style="color: #da5cb2;"></span>

Answer 1

您将数字附加到字符串。使用 parseInt 将您的 innerHTML 转换为数字，它将按您的预期工作。

document.getElementById("data-gen").innerText = Math.floor((Math.random() * 100000) + 1) + Math.floor((Math.random() * 100) + 1);

nowResources = function() {
  // parseInt( yourString, radix )
  const num = parseInt( document.getElementById("data-gen").innerText, 10 );
  document.getElementById("data-gen").innerText = num + Math.floor((Math.random() * 10) + 1);
  setTimeout(nowResources, 1000);
}

nowResources();

<span id="data-gen" style="color: #da5cb2;"></span>

但缺点是，每次要更改 DOM 时都需要查询它。最好将您的号码存储在超时之外并使用这样的间隔:

let num = Math.floor((Math.random() * 100000) + 1) + Math.floor((Math.random() * 100) + 1);

document.getElementById("data-gen").innerText = num;
nowResources = function() {
  num += Math.floor((Math.random() * 10) + 1);
  document.getElementById("data-gen").innerText = num;
}

setInterval( nowResources, 1000 );
nowResources();

<span id="data-gen" style="color: #da5cb2;"></span>

这样您就不需要在每次迭代时都解析您的数字。