Javascript 使用javascript滚动日志文件（tail -f）动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8224333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling log file (tail -f) animation using javascript
提问by Michelle
I'd like to create an animation on a website to mimic a scrolling log file or tail -f. I'd feed it a list of fake log messages and they would be written to the bottom of the div and scroll up and off the top as new messages are displayed and then loop around. It needs to look authentic, white on black using a fixed width font etc.
我想在网站上创建一个动画来模仿滚动日志文件或 tail -f。我会给它提供一个假日志消息列表，它们将被写入 div 的底部，并在显示新消息时向上滚动并离开顶部，然后循环。它需要使用固定宽度的字体等看起来真实，黑底白字。
Does anyone know of any javascript or jQuery libraries which could help me with this? I'm a beginner with javascript, so any advice on how to approach this would be much appreciated.
有谁知道任何可以帮助我解决这个问题的 javascript 或 jQuery 库？我是 javascript 的初学者，所以任何关于如何解决这个问题的建议都将不胜感激。
回答by Manuel van Rijn
I've made a simple example for you
我为你做了一个简单的例子
http://jsfiddle.net/manuel/zejCD/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>回答by techarch
Here is a great solution
这是一个很好的解决方案
This uses an ajax request, and the HTTP Range: header to request only the last ~30KB of a log file. It then polls for data appended to that file, and only ever retrieves new data (no refreshing the whole file, or even the last 30KB). Handles file truncation too.
这使用 ajax 请求和 HTTP Range: 标头来请求仅最后 ~30KB 的日志文件。然后它轮询附加到该文件的数据，并且只检索新数据（不刷新整个文件，甚至不刷新最后 30KB）。也处理文件截断。
回答by user4675296
I've updated Manuel van Rijn's script to include a timer and a toggle switch, along with some minor changes to the log lines. hope this helps. http://jsfiddle.net/5rLw3LoL/
我已经更新了 Manuel van Rijn 的脚本以包含一个计时器和一个切换开关，以及对日志行的一些细微更改。希望这可以帮助。 http://jsfiddle.net/5rLw3LoL/
html:
html：
<div id="tail">
<div>some line of text</div>
</div>
<button>Add Line</button>
js:
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: (important for formatting)
css:（对格式化很重要）
#tail {
border: 1px solid blue;
height: 400px;
width: 500px;
overflow: hidden;
}
回答by TypingTurtle
This can be achieved with CSS by simply flipping the outer and inner container using transform: rotateX(180deg);https://jsfiddle.net/tnrn6h59/2/
这可以通过使用https://jsfiddle.net/tnrn6h59/2/简单地翻转外部和内部容器来通过 CSS 实现transform: rotateX(180deg);
Only issue here is that the scroll is also reversed, not an issue for mobile.
这里唯一的问题是滚动也反转了，而不是移动设备的问题。
