0

約 15 行の div ボックス内に戦闘情報が入る戦闘ログを作成しています。16 行以上の後、テキストはボックスを通過し、南に向かい始めます。

Javascript で「ねえ、15 行後に新しい行を作成し、最後の行を削除してください!」と言う方法はありますか?

これを配列で設定すると思います。それは正しいでしょうか？15 要素の行に沿って何かを言い、16 要素の後、最後の要素を削除して新しい要素をプッシュしますか?

これは私がコードのために持っているすべてです:

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

これらが 15 回以上になると、DIV ファイト ログ ボックスの外に出ます。

4

3 に答える 3

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');
于 2013-09-16T23:26:11.377 に答える
0

ここにJSFiddleがあります

ログ メッセージをラップspanして、選択可能な DOM アイテムにします。15+ の場合は最後の 1 つを選択して削除します。これがどのように行われるかです。

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);
}
于 2013-09-17T00:04:30.793 に答える