Tệp nhật ký cuộn (đuôi -f) hoạt ảnh bằng cách sử dụng javascript

Question

Tôi muốn tạo hoạt ảnh trên trang web để bắt chước tệp nhật ký cuộn hoặc đuôi -f. Tôi sẽ cung cấp cho nó một danh sách các thông điệp tường trình giả mạo và chúng sẽ được ghi vào phần dưới của div và cuộn lên và xuống phía trên khi các tin nhắn mới được hiển thị và sau đó lặp lại. Nó cần phải nhìn xác thực, trắng trên nền đen bằng cách sử dụng phông chữ có chiều rộng cố định, v.v.

Có ai biết về bất kỳ thư viện javascript hoặc jQuery nào có thể giúp tôi với điều này không? Tôi là người mới bắt đầu với javascript, vì vậy bất kỳ lời khuyên nào về cách tiếp cận này sẽ được nhiều người đánh giá cao.

Answer 1

Tôi đã thực hiện một ví dụ đơn giản để bạn

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

Đây là một giải pháp tuyệt vời

này sử dụng một yêu cầu ajax, và Range HTTP : tiêu đề để chỉ yêu cầu ~ 30KB cuối cùng của tệp nhật ký. Sau đó nó thăm dò ý kiến ​​cho dữ liệu nối vào tập tin đó, và chỉ bao giờ lấy dữ liệu mới (không làm mới toàn bộ tập tin, hoặc thậm chí 30KB cuối cùng). Xử lý cắt ngắn tệp quá.

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

Answer 3

Tôi đã cập nhật kịch bản Manuel van Rijn của để bao gồm một bộ đếm thời gian và một nút chuyển đổi, cùng với một số thay đổi nhỏ cho dòng nhật ký. hi vọng điêu nay co ich. 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: (quan trọng để định dạng)

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

Answer 4

này có thể đạt được với CSS bằng cách đơn giản lật bên ngoài và hộp chứa bên trong sử dụng transform: rotateX(180deg);https://jsfiddle.net/tnrn6h59/2/

Chỉ có vấn đề ở đây là cuộn cũng được đảo ngược, không phải là vấn đề cho thiết bị di động.