2

这是一个示例，以解释我要实现的目标

Jimmy：嘿，我是从 PHP 发出的一条新消息，我是新来的，我已附加到消息日志中 :)！

汤米：嘿你！更多我们的消息来了，你很快就会被删除！

Jonny：对了，在 Jimmy 被赶出我们的盒子（div）之前，这只是一条信息。

10秒后……

汤米：嘿你！更多我们的消息来了，你很快就会被删除！

强尼：是的，在吉米因为被击倒而被移除之前，这只是一条信息。

比利：大家好！.. 等等吉米去哪儿了？

强尼：箱子太满了，所以我们中的一个人不得不离开，吉米在上面，所以他离开了。说到这里，汤米来了！汤米被删除。

使用 setInterval，我设法实现了类似的效果，但是，它只会删除 BOTTOM 溢出的一个，这是最新的，而不是消息是“旧”的顶部。

这是我为实现这一目标而创建的代码......

var message=document.getElementById('chat_wrap');

if(message.scrollHeight>message.offsetHeight) {
Element.remove();
}

所以基本上，我想要我所做的相反。但我不确定如何实现这一目标。

更新以使其更清晰：

对不起，我的解释不是很清楚。一个很好的例子是水瓶，当它装满时，从底部取出水，而不是从顶部取出。另一种解释我要实现的目标的方法基本上是最新的是优先级，所以如果最新的需要 div 中的空间，那么删除仍然存在的最旧的。

4

2 回答 2

1

这是一个工作示例。

http://jsfiddle.net/JNahf/2/

<div id="messages">
</div>
<button id="insertAMessage">Insert a message</button>

脚本

$(function(){
    var removeOldest = function(){
        var messages = $("#messages");
        var maxHeight = messages.height();
        var height = 0;

        $(messages.children().get().reverse()).each(function(){
            height += $(this).height();
            if (height > maxHeight)
               $(this).remove();
        });
    };


    $("#insertAMessage").click(function(){
       $('<div class=".messageItem">bla bla bla bla</div>').appendTo("#messages");
       removeOldest();
   });
});​

我正在使用 jquery，因为它很简单。如果您不使用 jquery，则想法是相同的，但您需要调整代码。

于 2012-07-28T16:51:32.983 回答
0

至少... 看看，我使用 jQuery 来完成任务。

HTML：

<div id="chat"></div>

JavaScript：

// messages to be processed
var messages = [{
    id: 1,
    from: "David",
    text: "Test 1"
}, {
    id: 2,
    from: "David",
    text: "Test 2"
}, {
    id: 3,
    from: "David",
    text: "Test 3"
}, {
    id: 4,
    from: "David",
    text: "Test 4"
}, {
    id: 5,
    from: "David",
    text: "Test 5"
}, {
    id: 6,
    from: "David",
    text: "Test 6"
}];

// how many messages the container acepts?
var maxMessages = 3;

// how many messages the container has?
var messageCounter = 0;

// what is the index of the message that is being currently processed
var currentIndex = 0;

// the messages that was processed (It will work like a queue (FIFO)
var processedMessages = [];

$(function(){
    // processes one message for each 3 seconds
    setInterval( function(){

        // the current message
        var message = messages[currentIndex++];

        // is there a message to process?
        if ( message ) {

            // yes, there is!

            // first, removes the oldest if the max quantity was reached
            if ( messageCounter == maxMessages ) {

                // the container now will have minus one message
                messageCounter--;

                // what is the oldest one?
                // removes from the queue head
                var oldest = processedMessages.pop();

                // removes from the container
                $( "#message_" + oldest.id ).remove();

            }

            // new message incoming!
            messageCounter++;

            // inserts the new message at the queue tail
            processedMessages.unshift( message );

            // inserts the message in the container
            $( "#chat" ).append( "<div id='message_" + message.id + "'>From " +
                                 message.from + ": " + message.text + "</div>" );

        } else {

            // there is no message
            currentIndex--;

        }

    }, 3000 );

});

JsFiddle：http: //jsfiddle.net/davidbuzatto/Ep4tk/

于 2012-07-28T17:03:19.820 回答