Помогите пожалуйста с кодом в чате.
Здравствуйте!
Помогите пожалуйста с кодом в чате. Это чат для стримеров, выполняет функцию отображения информации на стриме. Нужно добавить в коде функцию исчезновения сообщения через определённое время, то есть блок с сообщением должен быть виден заданое время. Оплата на киви, напишите цену в ЛС пожалуйста, сколько стоит такая работа я не знаю. Код HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="http://allfont.ru/allfont.css?fonts=a_campuscaps-bold" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href="chat.css" rel="stylesheet" type="text/css" />
<link href="../animate.css" rel="stylesheet" type="text/css" />
<link href='../perfect-scrollbar.min.css' rel='stylesheet' type="text/css" />
<script src="../jquery.min.js"></script>
<script src="../jquery.tmpl.js"></script>
<script src="../extended_methods.js"></script>
<script src="../perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">
var autoScroll = true;
var qtyMess = 100;
var timeNewMessage = 10000;
//
$.fn.textStroke = function(r, colour) {
var rules = [];
var steps = 91;
for (var t=0;t<=(2*Math.PI);t+=(2*Math.PI)/steps){
var x = r*Math.cos(t);
var y = r*Math.sin(t);
x = (Math.abs(x) < 1e-6) ? '0' : x.toString();
y = (Math.abs(y) < 1e-6) ? '0' : y.toString();
rules.push( x + "px " + y + "px 0px " + colour );
}
this.css('textShadow',rules.join());
};
$(document).ready(function() {
SetAutoScrollPerfect();
SetSocket();
});
function NewMessage(data) {
var obj = JSON.parse( data );
if (obj.clear_chat) {
$(".user_mess[tag='" + obj.user + "']").html(obj.text);
} else {
/////////////////////////////////////////
var level = 91;
if (obj.rank_msg_qty <= 260) {
level = 91 - ~~(obj.rank_msg_qty / 20);
}
if (obj.rank_msg_qty > 260 && obj.rank_msg_qty <= 740) {
level = 78 - ~~((obj.rank_msg_qty - 260) / 30);
}
if (obj.rank_msg_qty > 740 && obj.rank_msg_qty <= 1740) {
level = 62 - ~~((obj.rank_msg_qty - 740) / 50);
}
if (obj.rank_msg_qty > 1740 && obj.rank_msg_qty <= 3340) {
level = 42 - ~~((obj.rank_msg_qty - 1740) / 80);
}
if (obj.rank_msg_qty > 3340 && obj.rank_msg_qty <= 4840) {
level = 22 - ~~((obj.rank_msg_qty - 3340) / 100);
}
if (obj.rank_msg_qty > 4840 && obj.rank_msg_qty <= 6004) {
level = 7 - ~~((obj.rank_msg_qty - 4840) / 194);
}
if (obj.rank_msg_qty > 6004) {
level = 1;
}
obj['dbd_icon'] = "<img class='dbd_icon' src='./icons/lvl_" + level + ".png'>";
$('#content').append(
$('#message_template').tmpl(obj)
);
$('.mess').last()
.addClass("animated fadeIn");
$('.mess #div_nick').last().textStroke(2,'#000');
/////////////////////////////////////////
}
if ($('.mess').length > qtyMess) {
$('.mess:first').detach();
}
UpdateScroll();
}
</script>
<script id="message_template" type="text/x-jquery-tmpl">
<div class="mess">
<div class="div_message0">
${site_img} ${moderator} ${sub} ${spec_img} ${rank_img} <span id="div_nick" style="color:${color_nick}">${user}: </span>
<div class="dbd_icon">
${dbd_icon}
</div>
<div class="mess_block">
<div class="user_mess" id="div_text${reply}" tag="${user}" style="color:${color_text}">${text}</div>
</div>
</div>
</div>
<p> </p>
</script>
</head>
<body>
<div id="chat-wrapper" class="nano">
<div class="nano-content" id="content"> </div>
</div>
<div id="bottom"></div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
div {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
html, body {
background-color: transparent;
#background-color: blue;
margin:0;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
}
a {
color:#67CE00;
}
.div_message0 {
vertical-align: bottom;
#border-bottom:1px solid #111111 !important;
#background-color: blue;
padding-left:7px;
padding-right:3px;
width: 100%;
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.7)); /* Standard syntax (must be last) */
padding: 5px 7px 28px;
}
#div_site {
color:#67CE00;
}
#div_nick {
color:#FFF;
font-weight: bold;
font-family: 'a_CampusCaps Bold', arial;
font-size:16px;
}
#div_admin {
color:#FFFFFF;
background-color:#F00;
font-weight: bold;
}
#div_text0 {
color:#FFFFFF;
}
#div_text1 {
color:#F90;
}
.dbd_icon {
float: left;
}
.mess_block {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
display: table-cell;
}
.mess:before {
content: " ";
display: table;
}
.mess:after {
content: " ";
display: table;
clear: both;
}#chat-wrapper {
position: relative;
overflow: auto;
height: 100%;
}
#content, #chat-wrapper {
overflow: hidden;
box-sizing: border-box;
}