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

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

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

Answer 1

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

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

// some demo data for(var i=0; i<100; i++) { $("
").text("log line " + i).appendTo("#tail") } // scroll to bottom on init tailScroll(); // add button click $("button").click(function(e) { e.preventDefault(); $("
").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; } 

  
 
some line of text
 
 Add Line 

Answer 2

这是一个很好的解决方案

这使用ajax请求，HTTP Range：标头仅请求最后约30KB的日志文件。 然后它会轮询附加到该文件的数据，并且只检索新数据（不刷新整个文件，甚至不刷新最后的30KB）。 处理文件截断。

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

Answer 3

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

HTML：

 
 
some line of text
 
 Add Line 

JS：

 var tailcounter = 100; var tailswitch = false; // scroll to bottom on init tailScroll(); // add line to log function tailappend() { $("
").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

这可以通过CSS使用transform: rotateX(180deg);简单地翻转外部和内部容器来transform: rotateX(180deg); https://jsfiddle.net/tnrn6h59/2/

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