osv,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.EventMessageError {
background-color: #f43587;
color: #FFFFFF;
}
.EventMessageNormal {
background-color: #40bb39;
color: #FFFFFF;
}
</style>
<script>
let MessageBlockDestroyTimer;
function EventMessage(MessageText, MessageType, Delay) {
function MessageBlockRemove() {
let block = document.getElementById('EventMessage');
if (block) block.remove();
}
function MessageBlockCreate() {
MessageBlockRemove();
let NewMessageBlock = `<div class="${MessageType}" id="EventMessage">${MessageText}</div>`;
let NewMessageBlockPosition = document.querySelector('body');
NewMessageBlockPosition.insertAdjacentHTML('afterbegin', NewMessageBlock);
//console.log('Block crested');
}
function MessageBlockDestroy(Delay) {
window.clearTimeout(MessageBlockDestroyTimer);
MessageBlockDestroyTimer = window.setTimeout(MessageBlockRemove, Delay);
}
if (!document.querySelector(`.${MessageType}`)) MessageBlockCreate();
else document.querySelector(`.${MessageType}`).textContent = MessageText;
MessageBlockDestroy(Delay);
}
</script>
</head>
<body>
<button onclick="EventMessage('Текст обычного сообщения 1', 'EventMessageNormal', 3000)">Normal 1</button>
<button onclick="EventMessage('Текст обычного сообщения 2', 'EventMessageNormal', 3000)">Normal 2</button>
<button onclick="EventMessage('Текст сообщения об ошибке', 'EventMessageError', 5000)">Error</button>
</body>
</html>