问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery 内容一直滚动效果

头像
Null
    121124

    现在有一个需求,每隔几秒中会从后台收到log日志,我需要显示在网页上查看.
    我想让这个日志滚动起来,这样看着就知道有新的日志产生.效果就像你从终端cat一个日志,总是新的信息会把之前的往上挤.谢谢~!

    jquery前端动画
    阅读 6.2k
    3 个回答
    得票最新
    头像
    Null
      121124
      ✓ 已被采纳

      非常感谢大家的回答。小瑜的答案给我提示，当然也很感谢kikong的热心回答。
      我找打了一个解决方案：slideDown/slideUp

      var obj； //Log数组
var index； //当前索引
function renderLog()
if(index < obj.length) {
    //TODO
    //修改Log样式，并隐藏
    $("#log-content").prepend(obj[index++]);
    slideDown(3, function(){   renderLog();   }); 
}

      解释一下：
      之前我使用for去循环添加Log节点，每个添加动作都有10ms执行时间，实际效果是，所有节点同时执行了添加动作。好像是将左右动作事件注册了，但是循环却会一直执行。
      所以想办法让这些动作顺次执行，而不是并行的。
      如代码所示，我用了递归去做，sildeDown()里的函数会在执行动作完成后再执行，这样就完美解决里。
      效果很理想，跟从shell查看Log效果一样。

      头像
      kikong
        19.1k31320

        1）页面上设置一个textarea
        2）把获取到的log内容文本，append到textarea的内容区域中
        3）此时textarea区域滚动条位置就会发生变化
        4) 调用textarea元素的scroll方法，滚动到底部
        使用div也可以实现

        头像
        TTFB
          8.4k31326

          Code

          <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin-bottom: 150px;">
<ul id="logs">
    <li>This is log 1</li>
    <li>This is log 2</li>
    <li>This is log 3</li>
    <li>This is log 4</li>
    <li>This is log 5</li>
    <li>This is log 6</li>
    <li>This is log 7</li>
    <li>This is log 8</li>
</ul>


<script src="script/jquery.js"></script>
<script>

    var i = 9;
    var $logs = $('#logs');

    setInterval(
            function () {
                var $el = $('<li>This is log ' + (i++) + '</li>');
                $el.appendTo($logs);
                $('body').animate({scrollTop: $el.offset().top});
            },
            1000
    )

</script>
</body>
</html>

          Effect

          图片描述

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题