Desplazamiento de la animación del archivo de registro (tail -f) usando javascript

Question

Me gustaría crear una animación en un sitio web para imitar un archivo de registro de desplazamiento o tail -f. Le daría una lista de mensajes de registro falsos y se escribirían en la parte inferior de la div y se desplazaría hacia arriba y hacia afuera desde la parte superior a medida que se muestran nuevos mensajes y luego se abrirá un círculo. Tiene que verse auténtico, blanco sobre negro con una fuente de ancho fijo, etc.

¿Alguien sabe de alguna biblioteca javascript o jQuery que pueda ayudarme con esto? Soy un principiante con javascript, por lo que cualquier consejo sobre cómo abordar esto sería muy apreciado.

Answer 1

he hecho un ejemplo sencillo para ti

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

Aquí es una gran solución

Esto utiliza una petición AJAX, y la gama de HTTP : encabezado para solicitar solo los últimos ~ 30 KB de un archivo de registro. A continuación, sondea los datos adjuntos a ese archivo y solo recupera los datos nuevos (no actualiza todo el archivo, ni siquiera los últimos 30 KB). Maneja el truncamiento de archivos también.

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

Answer 3

He actualizado el guión de Manuel van Rijn para incluir un temporizador y un interruptor de palanca, junto con algunos cambios menores en las líneas de registro. espero que esto ayude. 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: (importante para el formateo)

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

Answer 4

Esto se puede lograr con CSS simplemente dar la vuelta al exterior y contenedor interno usando transform: rotateX(180deg);https://jsfiddle.net/tnrn6h59/2/

El único problema aquí es que el desplazamiento también se invierte, no es un problema para dispositivos móviles.