使用javascript滚动日志文件（tail -f）动画 [英] Scrolling log file (tail -f) animation using javascript

问题描述

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

有谁知道任何javascript或jQuery库可以帮助我吗？我是一个初学者javascript，所以任何建议如何处理这将非常感谢。

解决方案

一个简单的例子。

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

  // some demo datafor（var i = 0; i< 100; i ++）{$（< div />\").text(\"log line+ i）.appendTo（＃tail）} //滚动到底部inittailScroll（）; //添加按钮单击$ button）; click（function（e）{e.preventDefault（）; $（< div />\").text(\"new line）。appendTo（＃tail）; tailScroll }）; // tail effectfunction 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>一些文本行< / div>< / div>< button>添加行< / button>  

/ p>

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.

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.

解决方案

I've made a simple example for you

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>

这篇关于使用javascript滚动日志文件（tail -f）动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！