Изменение цвета фона div в окне чата с каждым сообщением

У меня есть обычная чат-комната, где все пользователи могут вводить сообщения, и эти сообщения могут быть видны и другими. У меня возникла ситуация, когда я говорю, что я ввожу сообщение в поле чата, а bg-цвет div меняется на красный, а следующее сообщение меняется на белый. Кроме того, если какой-либо другой пользователь отправляет какое-либо сообщение в общий чат, и позволяет сказать, что последний цвет bg div был белым, тогда он должен выглядеть красным для всех. Короче, мне нужно изменить цвет bg div с каждым сообщением, отправленным любым пользователем в этом общем окне чата. Результат должен выглядеть примерно так, как показано на скриншоте. Можно ли это сделать с помощью метки времени? Если да, то как?Изменение цвета фона div в окне чата с каждым сообщением

Это мой простой HTML DIV обновляется JQuery:

<div id="wrapper"> 
      <div class="bubble-container" ></div> 
</div>

Это мой стиль лист CSS:

.bubble-container 
{ 
    display: none; 
    width: 100%; 
    height: 50px; 
} 

.bubble 
{ 
    display: inline-block; 
    position: relative; 
    clear: both; 
    background-color: #ffffff; 
    width: 100%; 
} 


.bubble-text 
{ 
    height: 50px; 
    display:table; 
    margin-left: 10px; 
} 

.bubble-text p 
{ 
    display: table-cell; 
    vertical-align: middle; 
    font-size:16px; 
    margin-left: 10px; 
}

JQuery код для сообщения вводимого пользователя и показывая в пользовательском интерфейсе. Я использую websockets для создания этого приложения чата.

Логика функции работает нормально. Но я думаю, что часть, которая вас заинтересовала, - это способ, которым я занимаюсь стилем div. На данный момент для каждого сообщения этот код имеет белый bg div. Но мне нужно изменить его в качестве альтернативы.

function onMessage(evt) { 
    var msgText = evt.data; 
    var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>' + msgText + '</p></div></div>'); 
    var bubbles = 1; 
    var maxBubbles = 8; 
    var server; 
    //var bubble = text; 
    $("#msgText").val(""); 

    $(".bubble-container:last") 
     .after(bubble); 

    if (bubbles >= maxBubbles) { 
     var first = $(".bubble-container:first") 
      .remove(); 
     bubbles--; 
    } 

    bubbles++; 
    $('.bubble-container').show(250, function showNext() { 
     if (!($(this).is(":visible"))) { 
      bubbles++; 
     } 

     $(this).next(".bubble-container") 
      .show(250, showNext); 

     $("#wrapper").scrollTop(9999999); 
    }); 

}

источник

2015-08-03 Hitesh Bhutani

сообщение некоторый код для Chatbox пожалуйста, или то, что вы пытались –

@CodingEnthusiast я добавил код, но это не так, как она работает он отображается на скриншоте, который я приложил. Но вот как я хочу, чтобы он работал. –

использование CSS:

.bubble-container:nth-child(even) { 
 
    background: red; 
 
}

<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#1</p></div></div> 
 
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#2</p></div></div> 
 
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#3</p></div></div> 
 
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#4</p></div></div> 
 
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#5</p></div></div> 
 
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#6</p></div></div>

источник

2015-08-03 03:03:22

Спасибо! Это именно то, что я искал. –

Изменение цвета фона div в окне чата с каждым сообщением

ответ

Смежные вопросы