Scrolling log file (tail -f) animation using javascript

后端 未结 4 640
心在旅途
心在旅途 2020-12-28 10:33

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 t

相关标签:
4条回答
  • 2020-12-28 10:57

    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.

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

    0 讨论(0)
  • 2020-12-28 11:02

    This can be achieved with CSS by simply flipping the outer and inner container using transform: rotateX(180deg); https://jsfiddle.net/tnrn6h59/2/

    Only issue here is that the scroll is also reversed, not an issue for mobile.

    0 讨论(0)
  • 2020-12-28 11:07

    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/

    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: (important for formatting)

    #tail {
        border: 1px solid blue;
        height: 400px;
        width: 500px;
        overflow: hidden;
    }
    
    0 讨论(0)
  • 2020-12-28 11:11

    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>

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题