| benutzen |
23.05.2016 20:02 |
Удаление элемента документа по таймеру
Здравсвуйте , есть программа для стрима , называется BrоСhаt, которая собирает сообщения от зрителей с нескольких чатов и помещает их в один документ , который и отображается.
Как сделать так чтобы сообщения удалялись из документа если никто ничего не писал определенное время?
html
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="transparent/transparent.css">
</head>
<script>
var MESSAGE = "message";
var STATISTIC = "statistic";
var userScroll = false;
function onWheel(event)
{
event = event || window.event;
var delta = -( event.deltaY || event.detail || event.wheelDelta );
userScroll = document.body.scrollTop + window.innerHeight + delta < document.body.scrollHeight;
document.body.scrollTop = document.body.scrollTop + delta;
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
}
function scrollToBottom()
{
if( userScroll )
return;
document.body.scrollTop = document.body.scrollHeight;
}
function onStatisticReceived( service, value )
{
}
function onNewMessage( service, nickName, message, type )
{
var serviceElem = document.createElement( "img" );
serviceElem.className = service;
var serviceBlock = document.createElement( "div" );
serviceBlock.className = "service";
serviceBlock.appendChild( serviceElem );
var nickBlock = document.createElement( "div" );
nickBlock.className = "nick";
nickBlock.innerHTML = nickName + "<span class='separator'>: </span>";
var headerkBlock = document.createElement( "div" );
headerkBlock.className = "header";
headerkBlock.appendChild( serviceBlock );
headerkBlock.appendChild( nickBlock );
var messageBlock = document.createElement( "div" );
messageBlock.className = "message";
messageBlock.innerHTML = message;
var messageBox = document.createElement( "div" );
messageBox.className = "messagebox";
messageBox.appendChild( headerkBlock );
messageBox.appendChild( messageBlock );
var messageType = document.createElement( "div" );
messageType.className = type;
messageType.appendChild( messageBox );
var messagesList = document.getElementById( "messagesList" );
if( type != "" )
{
messagesList.appendChild( messageType );
}
else
{
messagesList.appendChild( messageBox );
}
scrollToBottom();
}
</script>
<body>
<div id="messagesList"></div>
<script>
setInterval( scrollToBottom, 500 );
var messagesList = document.getElementById( "messagesList" );
if (messagesList.addEventListener)
{
if ('onwheel' in document)
{
// IE9+, FF17+, Ch31+
messagesList.addEventListener("wheel", onWheel);
}
else if ('onmousewheel' in document)
{
// устаревший вариант события
messagesList.addEventListener("mousewheel", onWheel);
}
}
</script>
<!--START_BROWSER_CODE-->
<script>
var wsUri = "ws://localhost:15619";
var websocket = null;
function initWebSocket()
{
try
{
if (typeof MozWebSocket == 'function')
webSocket = MozWebSocket;
if ( websocket && websocket.readyState == 1 )
websocket.close();
websocket = new WebSocket( wsUri );
websocket.onopen = function (event)
{
console.log( 'initWebSocket:open' );
};
websocket.onclose = function (event)
{
setTimeout( initWebSocket, 3000 );
};
websocket.onerror = function (event)
{
websocket.close();
};
websocket.onmessage = function (event)
{
var message = JSON.parse( event.data );
//onNewMessage( "debug", "debug", message, "" );
if( MESSAGE == message.type )
{
onNewMessage( message.message.service, message.message.nick, message.message.message, message.message.type );
document.body.scrollTop = document.body.scrollHeight;
}
else if( STATISTIC == message.type )
{
onStatisticReceived( message.statistic.service, message.statistic.statistic );
}
document.body.scrollTop = document.body.scrollHeight;
};
}
catch (exception)
{
}
}
initWebSocket();
//setInterval(function() { document.body.scrollTop = document.body.scrollHeight; }, 500 );
</script>
<!--END_BROWSER_CODE-->
</body>
</html>
css
Код:
@-webkit-keyframes slideAnim
{
from{ margin-left: 100%; }
// 50%{ margin-left: -20%; }
// 70%{ margin-left: 15%; }
// 85%{ margin-left: -10%; }
// 95%{ margin-left: 5%; }
to{ margin-left: 0%; }
}
html
{
overflow: hidden;
}
body
{
padding: 0px;
margin: 0px;
}
#messagesList
{
}
.alias .messagebox
{
color: rgb( 255, 128, 0 );
}
.ignore .messagebox
{
color: rgb( 255, 128, 0 );
}
.support .messagebox
{
color: rgb( 255, 128, 0 );
}
.messagebox
{
font-family: Arial;
font-weight: bold;
line-height: 1.2em;
font-size: 22px;
background-color: rgba( 0,0,0, .2);
color: rgb( 255, 255, 255 );
width: 100%;
text-shadow: 2px 2px rgba( 128,128,128, .5 );
-webkit-animation: slideAnim .2s;
}
.header
{
display: inline-block;
}
.message
{
display: inline;
}
.service
{
display: inline-block;
}
.nick
{
display: inline-block;
color: #1895da;
}
.smile
{
height: 16px;
}
.picture
{
width: 100%;
}
.aces
{
content: url(../resources/aceslogo.png);
height: 16px;
}
.cybergame
{
content: url(../resources/cybergamelogo.png);
height: 16px;
}
.funstream
{
content: url(../resources/funstreamlogo.png);
height: 16px;
}
.gamerstv
{
content: url(../resources/gamerstvlogo.png);
height: 16px;
}
.gipsyteam
{
content: url(../resources/gipsyteamlogo.png);
height: 16px;
}
.goodgame
{
content: url(../resources/goodgamelogo.png);
height: 16px;
}
.hitbox
{
content: url(../resources/hitboxlogo.png);
height: 16px;
}
.igdc
{
content: url(../resources/igdclogo.png);
height: 16px;
}
.livecoding
{
content: url(../resources/livecodinglogo.png);
height: 16px;
}
.realltv
{
content: url(../resources/realltvlogo.png);
height: 16px;
}
.sc2tv
{
content: url(../resources/sc2tvlogo.png);
height: 16px;
}
.streambox
{
content: url(../resources/streamboxlogo.png);
height: 16px;
}
.twitch
{
content: url(../resources/twitchlogo.png);
height: 16px;
}
.vidi
{
content: url(../resources/vidilogo.png);
height: 16px;
}
.youtube
{
content: url(../resources/youtubelogo.png);
height: 16px;
}
|