Question

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

有谁知道任何javascript或jQuery库可以帮助我吗？我是javascript的初学者，所以对于如何处理这个问题的任何建议都会非常感激。

Answer 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

Answer 3

我已经更新了Manuel van Rijn的脚本，包括一个计时器和一个切换开关，以及对日志行的一些细微更改。希望这可以帮助。 http://jsfiddle.net/5rLw3LoL/

HTML：

<div id="tail">
    <div>some line of text</div>
</div>
<button>Add Line</button>

JS：

var tailcounter = 100;
var tailswitch = false;

// scroll to bottom on init
tailScroll();

// add line to log
function tailappend() {
    $("<div />").text("log line " + tailcounter).appendTo("#tail");
    tailcounter++;
    tailScroll();
}

// auto update every second
var t = setInterval(tailappend, 1000);

// toggle updates button click
$("button").click(function (e) {
    e.preventDefault();
    switch (tailswitch) {
        case false:
            clearInterval(t); // turns off auto update
            tailswitch = true;
            alert("auto update off");
            break;
        case true:
            t = setInterval(tailappend, 1000); // restarts auto update
            tailswitch = false;
            alert("auto update on");
            break;
    }
});

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

css :(对于格式化非常重要）

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

Answer 4

只需使用transform: rotateX(180deg); https://jsfiddle.net/tnrn6h59/2/

简单地翻转外部和内部容器，就可以通过CSS实现这一点

这里唯一的问题是滚动也是相反的，而不是手机的问题。

使用javascript滚动日志文件（tail -f）动画

4 个答案: