Question

我有一个小脚本，可以在给定时间内将数字增加一个数字。如果递增一个值++ ，则如果我想添加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

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

＆＃13;

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();

＆＃13;

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

＆＃13;

但有一个缺点是，每次要更改DOM时都要查询DOM。最好将您的号码存储在超时之外，并使用如下间隔：

＆＃13;

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();

＆＃13;

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

＆＃13;

这样您就不需要在每次迭代时解析您的号码。

Answer 2

当你使用+时，它以字符串形式连接并连接成字符串，使用 parseInt

将其转换为整数

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

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为了保持逻辑清晰，只需使用局部变量来存储值，不需要通过parseInt向后转换以及厌倦（和昂贵且杂乱）的DOM元素方法跳舞：

var value = 0;

function setValue(addValue) {
    value += addValue;
    document.getElementById("data-gen").innerHTML = value;
}

nowResources = function() {
  setValue(Math.floor((Math.random() * 10) + 1))
  setTimeout(nowResources, 1000);
}

nowResources();

添加数字而不是添加增量

3 个答案: