Question

我正在创建一个战斗日志，其中战斗信息将进入一个包含大约15行的div框内。在16行之后，文本通过框并开始朝南。

Javascript中有没有办法说“嘿，在15行之后，创建一个新行，并删除最后一行！”。

我想我会用数组来设置它。这是对的吗？在哪里我会说.. 15个元素的行，在16个元素之后，删除最后一个元素并推送一个新元素？

这就是我所拥有的所有代码：

document.getElementById("log").innerHTML += "Fight Log";

在其中15个以上之后，它会进入DIV战斗记录框之外。

Answer 1

尝试将这些消息添加到数组中，并每次重新呈现所有消息。这样您就可以使用数组方法来管理消息数量：

var log = [],
  messageElem = document.getElementById("log");    

function addMessage(message) {
  log.push(message);
  while (log.length > 16) {
    log.shift();
  }
  messageElem.innerHTML = log.join("\n");
}


... then later ...

addMessage('Fight Log');

Answer 2

这取决于你的div如何，它可能有固定的大小。尝试指定style =“overflow：auto;”因此，一旦消息超出界限，它就会显示滚动条。

Answer 3

Here is the JSFiddle for it

用span包裹您的日志消息，以便它变成可选择的DOM项目。选择15岁以上的最后一个并删除它。这是怎么做的。

function addMessage(message) {
    var logElement = document.getElementById('log');
    var elements = document.getElementById('log').getElementsByTagName('span');
    var length = elements.length;
    if(length >= 15) {
        logElement.removeChild(elements[length-1]);
    }
    logElement.innerHTML += "<span>" + message + "</span>";
}

for(var i=1; i<30; i++) {
    addMessage('Figth Log ' + i);
}

javascript - 如何防止document.write走出Div框？

3 个答案: