Question

我想在两个document.write之间创建延迟。我使用setTimeout来执行此操作，但一旦执行，它就会覆盖前一个文本。我希望能够显示文本，等待一些延迟，显示其下面的一些其他文本而不删除任何以前的文本。此代码附加到其他空的HTML文件。此外，我在使用<br>时没有取得任何成功。

var numOfDice = prompt("How many dice?");
var numOfSides = prompt("How many sides on these dice?");

var rollDice = function(numOfDice) {
    var rollResults = []; 

    for (var i = 0; i < numOfDice; i++) {
        rollResults[i] = Math.floor((Math.random() * numOfSides) + 1);
    }

    return rollResults;
}

var printResults = function() {
    var i = 0;
    while (i < rollResults.length - 1) {        
        document.write(rollResults[i] + ", ");
        i++;
    }

    document.write(rollResults[i]);
}

alert("Roll the dice!");


var rollResults = rollDice(numOfDice);

printResults();
setTimeout(function() {document.write("These numbers...")}, 1000);

Answer 1

首先，请查看this answer为什么不应该使用document.write。

然后，在您了解为什么使用document.write是不好的做法之后，您可以将其替换为element.appendChild。

有关该功能的更多信息，请访问Mozilla Development Network。

代码示例：

var numOfDice = prompt("How many dice?");
var numOfSides = prompt("How many sides on these dice?");

var rollDice = function(numOfDice) {
  var rollResults = []; 

  for (var i = 0; i < numOfDice; i++) {
    rollResults[i] = Math.floor((Math.random() * numOfSides) + 1);
  }

  return rollResults;
}

var printResults = function() {
  var i = 0;
  while (i < rollResults.length - 1) {
    var node = document.createElement("p");
    node.innerHTML = rollResults[i] + ", ";
    document.querySelector("body").appendChild(node);
    i++;
  }
  var node = document.createElement("p");
  node.innerHTML = rollResults[i];
  document.querySelector("body").appendChild(node);
}

alert("Roll the dice!");

var rollResults = rollDice(numOfDice);

printResults();
setTimeout(function() {
  var node = document.createElement("p");
  node.innerHTML = "These numbers...";
  document.querySelector("body").appendChild(node);
}, 1000);

请注意，此代码将在新行上显示每个掷骰子，因为我正在为每个卷创建一个新的p元素。如果你想让它们出现在同一行上，创建一个p元素，然后在while循环中，将rollresult追加到p元素`innerHTML'

如何在setTimout中使用document.write而不清除以前的文本

1 个答案: