Для реализации работы с таймерами в JavaScript можно использовать функции `setTimeout` и `setInterval`. В вашем случае, чтобы создать уведомление, которое будет показываться в течение 10 секунд и исчезать, а затем повторяться через 10 секунд после закрытия, лучше всего подойдет комбинация этих функций.
Вот пример реализации данного сценария:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Уведомление</title>
<style>
#notification {
display: none;
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 20px;
background-color: #f0c674;
border: 1px solid #c9c9c9;
border-radius: 5px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="notification">
Уведомление! <button onclick="closeNotification()">Закрыть</button>
</div>
<script>
let showNotificationInterval = 20000; // 10 секунд на показ, 10 секунд на скрытие
let notificationVisible = false;
function showNotification() {
const notification = document.getElementById('notification');
if (!notificationVisible) {
notification.style.display = 'block';
notificationVisible = true;
setTimeout(closeNotification, 10000); // закрыть уведомление через 10 секунд
}
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
notificationVisible = false;
setTimeout(showNotification, 10000); // снова показать уведомление через 10 секунд
}
// Изначально запускаем уведомление
setTimeout(showNotification, showNotificationInterval);
</script>
</body>
</html>
```
### Как это работает:
1. **HTML**: Создаем элемент `div` для уведомления с кнопкой для его закрытия.
2. **CSS**: Устанавливаем стиль для уведомления: позиционирование, цвет фона и т.д.
3. **JavaScript**:
- Определяем переменную для отслеживания видимости уведомления.
- `showNotification()`: Функция, которая показывает уведомление и устанавливает таймер на его автоматическое закрытие через 10 секунд.
- `closeNotification()`: Функция, которая скрывает уведомление и устанавливает таймер на его повторное появление через 10 секунд.
- Изначально запускаем первое уведомление через `setTimeout`.
### Использование:
Когда пользователь загрузит страницу, уведомление появится, через 10 секунд будет закрыто и снова появится через 10 секунд. Пользователь также может закрыть уведомление путем нажатия кнопки, после чего оно снова появится через 10 секунд.