使用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>

Answer 2

这是一个很好的解决方案

这使用ajax请求,HTTP Range:标头仅请求最后约30KB的日志文件.然后轮询附加到该文件的数据,并且只检索新数据(不刷新整个文件,甚至不刷新最后的30KB).处理文件截断.

https://github.com/ukhas/js-logtail#readme