Помогите доработать код вывода сообщений

B
На сайте с 24.12.2016
Offline
0
565

Пример работы кода - http://1loda69f.plp7.ru

Но надо чтобы сообщения не накапливались в окошке, а после появления через несколько секунд оно исчезало, затем на его месте появлялось новое. То есть чтобы одновременно отображалось одно новое сообщение.

Сам код:


<script>
chat = {
loaded: false, //Флаг уже загруженного чата
timeout: 2000, //Время в секундах между выводами сообщений

names: ['Елена', 'Василий', 'Игнат', 'Милана', 'Анатолий', 'Никита', 'Александр', 'Евгений', 'Виктория', 'Михаил', 'Александр', 'Ольга', 'Валентина', 'Людмила', 'Азмур', 'Владимир', 'Никита', 'Юлия', 'Ленуська', 'Марат', 'Артём', 'Нийяз', 'Фаиль', 'Елизавета', 'Тигран', 'Валерия'],
text: ['Заработал(а) только что 312 руб.',
'Заработал(а) только что 271 руб.',
'Заработал(а) только что 211 руб.',
'Заработал(а) только что 283 руб.',
'Заработал(а) только что 400 руб.',
'Заработал(а) только что 152 руб.',
'Заработал(а) только что 300 руб.',
'Заработал(а) только что 478 руб.'],
start: function() {
if (!chat.loaded)
{
var container = $('.chat');
var wrapper = $('<div class="chatwrap"></div>');
wrapper.insertBefore(container);
wrapper.append(container);


$('.chat + .inputs input').on('keyup', function(e) {
if (e.keyCode == 13 || e.keyCode == 10)
chat.userPost();
});

$('.chat + .inputs button').on('click', function() {chat.userPost();})
}
chat.loaded = true;
chat.timer = setInterval(chat.post, chat.timeout);
},
post: function() {
if (arguments.length < 2)
{
var userclass = '';
var rnd = Math.round(Math.random() * chat.names.length-1);
if (rnd > chat.names.length - 1 || rnd < 0)
rnd = chat.names.length - 1;
var name = chat.names[rnd];
rnd = Math.round(Math.random() * chat.text.length-1)
if (rnd > (chat.text.length - 1) || rnd < 0)
rnd = chat.text.length - 1;
var msg = chat.text[rnd];
}
else
{
var userclass = ' userpost';
var name = arguments[0];
var msg = arguments[1];
}
var newmsg = $('<div class="message'+userclass+'"><b>'+name+'</b>: '+msg+'</div>');
$('.chat').append(newmsg);
$('.chat')[0].scroll= $('.chat')[0].scrollTop= 9999;
},
userPost: function() {
var name = $('.chat + .inputs input:first-child');
var text = $('.chat + .inputs input:nth-child(2)');
if (!name.val().length)
{
name.focus();
return;
}
if (!text.val().length)
{
text.focus();
return;
}
chat.post(name.val(), text.val());
text.val('');
text.focus();
}
}
$(function() {
chat.start();
for (var t = 0; t < 6; t++)
chat.post();
});
</script>


<style>
.chatwrap {width: 500px; margin: 0 auto;}
.chat {
height: 300px;
overflow: hidden;
overflow-y: scroll;
background-color: #FFF;
}
.chat + .inputs {overflow: hidden; margin-top: 10px;}
.chat + .inputs input {
margin-right: 10px;
border: 1px solid #FAC514;
background-color: #FFF;
color: #A3A3A3;
height: 35px;
border-radius: 5px;
padding: 0 8px;
}
.chat + .inputs input:nth-child(2) {width: 250px;}
.chat + .inputs button {
background-color: #FAC514;
color: #FFF;
border: none;
height: 35px;
border-radius: 5px;
padding: 2px 15px;
cursor: pointer;
}
.chat + .inputs .leftside {float: left;}
.chat + .inputs .rightside {float: right;}
.chat .message {
background: rgba(0, 0, 0, 0) linear-gradient(to top, #ededed, #fefefe) repeat scroll 0 0;
border-radius: 50px;
box-shadow: 1px 1px 5px 0 rgba(150, 150, 150, 0.75);
box-sizing: border-box;
clear: both;
display: inline-block;
float: left;
margin-bottom: 10px;
margin-left: 22px;
max-width: 80%;
padding: 6px 20px;
position: relative;
word-wrap: break-word;
}
.chat .userpost b {color: #008300;}
</style>


<div class="chat"></div>
Ragnarok
На сайте с 25.06.2010
Offline
239
#1

вместо

$('.chat').append(newmsg);

строку

$('.chat').html(newmsg);

как-то так

//TODO: перестать откладывать на потом

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий