javascript - 使用 javascript 滚动日志文件 (tail -f) 动画

Question

我想在网站上创建一个动画来模仿滚动的日志文件或 tail -f。我会向它提供一个虚假日志消息列表，它们将被写入 div 的底部，并在显示新消息时向上滚动并离开顶部，然后循环。它需要看起来真实，黑底白字，使用固定宽度的字体等。

有谁知道任何可以帮助我解决这个问题的 javascript 或 jQuery 库？我是 JavaScript 的初学者，因此非常感谢任何有关如何处理此问题的建议。

Answer 1

我已经为你做了一个简单的例子

http://jsfiddle.net/manuel/zejCD/1/

// some demo data
for(var i=0; i<100; i++) {
    $("<div />").text("log line " + i).appendTo("#tail")
}

// scroll to bottom on init
tailScroll();

// add button click
$("button").click(function(e) {
    e.preventDefault();
    $("<div />").text("new line").appendTo("#tail");
    tailScroll();
});

// tail effect
function tailScroll() {
    var height = $("#tail").get(0).scrollHeight;
    $("#tail").animate({
        scrollTop: height
    }, 500);
}

#tail {
    border: 1px solid blue;
    height: 500px;
    width: 500px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="tail">
    <div>some line of text</div>
</div>

<button>Add Line</button>