Чтобы удалить сообщение через 5 секунд с помощью класса JavaScript, вы можете использовать один из следующих методов:
Метод 1: функция setTimeout()
// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
setTimeout(function() {
var message = document.querySelector('.message');
if (message) {
message.remove();
}
}, 5000);
Метод 2: функция setInterval()
// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
var countdown = 5;
var interval = setInterval(function() {
var message = document.querySelector('.message');
if (countdown <= 0) {
clearInterval(interval);
if (message) {
message.remove();
}
} else {
countdown--;
}
}, 1000);
Метод 3: classList и setTimeout()
// HTML
<div class="message">This message will be removed after 5 seconds.</div>
// JavaScript
var message = document.querySelector('.message');
message.classList.add('fadeout');
setTimeout(function() {
if (message) {
message.remove();
}
}, 5000);
В методе 1 функция setTimeout() используется для выполнения кода внутри функции после указанной задержки в 5000 миллисекунд (5 секунд). Он выбирает элемент сообщения с помощью document.querySelector() и удаляет его с помощью метода remove().
Метод 2 использует функцию setInterval() для уменьшения переменной обратного отсчета каждую секунду. Когда обратный отсчет достигает 0, интервал очищается и элемент сообщения удаляется.
Метод 3 добавляет к элементу сообщения CSS-класс «fadeout», который можно использовать для применения анимации затухания. Функция setTimeout() используется для удаления элемента через 5 секунд.