主页 / 问题 / 1484144
Accepted
Даша Новикова
Asked:2023-01-07 03:24:20 +0000 UTC2023-01-07 03:24:20 +0000 UTC

使用 SetInterval 隐藏和显示块

  • 772
<div class="notification__inner">
 <p hidden class="notification__item">1</p>
 <p hidden class="notification__item">2</p>
 <p hidden class="notification__item">3</p>
</div>

const notificationItem = document.querySelectorAll('.notification__item');

notificationItem.forEach(notification => {
  setInterval(() => {
    notification.hidden = false;
  }, 2000);
});

它需要作为网站上的通知栏。显示一个，然后隐藏，然后显示第二个，依此类推……直到用户单击十字关闭所有内容。

任务很简单，但是苦苦寻找了2-3个小时，一无所获，也想不通怎么去做。在此示例中，我希望块notification__item交替显示

javascript

1 个回答

  1. Best Answer

    所以？

    决定

    const first = document.querySelector(`p.notification__item`); // Находим первое уведомление
if (first) { // если существует
  first.hidden = false; // показываем его
  setInterval(() => { // запускаем таймер
    const selected = document.querySelector(`p.notification__item:not([hidden])`); // Находим уведомление которое показывается в данный момент
    const next = document.querySelector(`p.notification__item:not([hidden]) + p.notification__item[hidden]`); // Находим следуюшее уведомление
    if (selected) selected.hidden = true; // Скрываем уведомление которое показывается в данный момент
    (next ?? first).hidden = false; // Показываем следующее уведомление, если существет, или первое в противном случае
  }, 2000);
}
    <div class="notification__inner">
  <p hidden class="notification__item">У вас 10 непрочитанных сообщений</p>
  <p hidden class="notification__item">Пользователь "Альберт Эйнштейн" хочет добавить вас в друзья</p>
  <p hidden class="notification__item">Пожертвуйте церкви 1000р и получайте вип статус на нашем сайте</p>
</div>

    更好的解决方案

    我不建议将信息存储在标签中并隐藏它们。会有信息泄露的问题，优化也会有问题。一个更好的选择是将通知存储在一个数组中并在一个标签中显示它们。

    const notifications = [ // Все уведомления
  `У вас 10 непрочитанных сообщений`,
  `Пользователь "Альберт Эйнштейн" хочет добавить вас в друзья`,
  `Пожертвуйте церкви 1000р и получайте вип статус на нашем сайте`,
];

const pNotifications = document.querySelector(`p#notifications`); // Блок для показа
if(notifications.length > 0) { // если количество уведомлений больше 0
  let index = 0; // Создаем переменную который показывает индекс уведомления который показывается в данный момент
  setInterval(() => { // запускаем таймер
    pNotifications.innerText = notifications[index]; // В блоке стаим тект уведомления который должен показываться
    index = (index == notifications.length - 1 ? 0 : index + 1); // Увеличиваем индекс, если не в конце, или обнуляем в противном случае
  }, 2000);
}
    <p id="notifications"></p>

    • 1

相关问题