Animazione file di registro di scorrimento (tail -f) utilizzando javascript

Question

Mi piacerebbe creare un'animazione su un sito Web per simulare un file di registro a scorrimento o coda -f. Gli darei un elenco di messaggi di log fasulli e verrebbero scritti nella parte inferiore del div e scorreranno verso l'alto e verso l'alto mentre vengono visualizzati nuovi messaggi e quindi girano intorno. Deve sembrare autentico, bianco su nero usando un font a larghezza fissa ecc.

Qualcuno sa di librerie javascript o jQuery che potrebbero aiutarmi con questo? Sono un principiante con javascript, quindi qualsiasi consiglio su come affrontarlo sarebbe molto apprezzato.

Answer 1

ho fatto un semplice esempio per voi

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

Ecco una grande soluzione

Questo utilizza una richiesta AJAX, e la gamma HTTP : intestazione per richiedere solo l'ultimo ~ 30 KB di un file di registro. Quindi esegue il polling dei dati aggiunti a quel file e recupera solo sempre nuovi dati (nessun aggiornamento dell'intero file o persino degli ultimi 30 KB). Gestisce anche il troncamento dei file.

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

Answer 3

Ho aggiornato la sceneggiatura di Manuel van Rijn per includere un timer e un interruttore a levetta, insieme ad alcune piccole modifiche alle linee di registro. spero che questo ti aiuti. 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 per la formattazione)

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

Answer 4

Ciò può essere ottenuto con i CSS semplicemente capovolgendo l'esterno e contenitore interno con transform: rotateX(180deg);https://jsfiddle.net/tnrn6h59/2/

L'unico problema qui è che lo scorrimento è anche invertito, non un problema per il cellulare.