Создание появляющегося на несколько секунд сообщения
Доброго времени суток!
Пытаюсь создать появляющийся на несколько секунд блок с текстом, со следующими правилами: На странице будет несколько кнопок, по клику на которые будет создаваться сообщение с тем или иным текстом и CSS классом. При последующем клике на туже кнопку, сообщение должно продлить показ. При клике на другую кнопку, сообщение поменяет текст и CSS класс, а так же продлит показ. Написал такой код: .EventMessageError {
background-color: #f43587;
color: #FFFFFF;
}
.EventMessageNormal {
background-color: #40bb39;
color: #FFFFFF;
}
<button onclick="EventMessage('Текст обычного сообщения', 'EventMessageNormal')"></button>
<button onclick="EventMessage('Текст сообщения об ошибке', 'EventMessageError')"></button>
function EventMessage(MessageText, MessageType) {
function MessageBlockCreate() {
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) {
let MessageBlockDestroyTimer = window.setTimeout(() => {
document.body.removeChild(document.getElementById('EventMessage'));
//console.log('Block destroyed');
}, Delay);
}
if (document.getElementById('EventMessage')) {
document.body.removeChild(document.getElementById('EventMessage'));
} else {
MessageBlockDestroy(2500);
}
MessageBlockCreate();
}
Все работает так, как предполагалось, за исключением времени показа сообщения, оно равно времени установленному в setTimeout, на все последующие вызовы функции. Понимаю, что нужно сбросить setTimeout, но не понимаю как. |
всплывающее сообщение
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>
|
Цитата:
К примеру так: <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>
При нажатии кнопки Normal 1, а затем Normal 2, сообщение не создается. Если исправить на !MessageBlockCreate(); то работает. Спасибо! |
Цитата:
|
| Часовой пояс GMT +3, время: 23:25. |