Как сделать, чтобы скрипт №2 начинал работу вслед за скриптом №1?

@Siurendy · Регистрация: 07.06.2016

Студворк — интернет-сервис помощи студентам

Имеется два скрипта, один рандомно показывает блоки, а второй
скрывает через N секунд содержимое блока №1. Но как сделать, чтобы код скрывал содержимое еще и блока №3? а также отчитывал время до скрытия содержимого этих блоков не с момента загрузки страницы, а с момента показа данных блоков?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
   constructor(cls, delay=1350, pause=300){
   this.parent = document.querySelector(cls);
   this.items = this.parent.children;
   delay = Array.from({length : this.items.length}, (v,k) => delay * k);
   Array.from(this.items).forEach((el,i) => {
             i = delay.length * Math.random()|0;
             i = delay.splice(i, 1)[0];
             el.style.setProperty("--delay", `${i}ms`)
          });
   window.setTimeout(()=> this.parent.classList.add("show"), pause);
   }
}
new RandomFadeIn(".box-container")
  });
  
  
  
  setTimeout(function(){
    document.getElementById('message').style.display = 'none';
}, 5000);

HTML5
1
2
3
4
5
6
<div class="box-container">
<div class="block"><div class="num">1</div><div class="items">один<p id="message">текст №1 скроется через 5 сек.</p></div></div>
  <div class="block"><div class="num">2</div><div class="items">два</div></div>
  <div class="block"><div class="num">3</div><div class="items">три<p id="message">текст №2 скроется через 5 сек.</p></div></div>
  <div class="block"><div class="num">4</div><div class="items">четыре</div></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.box-container {
  width: 232px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
 
.box-container div {
  height: 50px;
  width: 50px;
  text-align: center;
  background-color: hsla(0, 0%, 75%, 1);
  line-height: 50px;
  position: relative;
}
.box-container div .items{
 margin: 0;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 background-color: hsla(167, 100%, 30%, 1);
 display: block;
 opacity: 0;
 z-index: -1;
 transition: 1s var(--delay);
}
.box-container.show div .items{
 opacity: 1;
 z-index: 1;
}

@D_Vik · 21.07.2020, 10:08

Вы можете поступить примерно так, (немного правда изменил ваши исходники) :

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
  <div class="box-container">
    <div class="block">
      <div class="hidden-content">
        <p>один</p>
        <div class="some-other-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Dolorem perspiciatis
        </div>
      </div>
    </div>
    <div class="block">
      <div class="hidden-content">
        <p>два</p>
      </div>
    </div>
    <div class="block">
      <div class="hidden-content">
        <p>три</p>
        <div class="some-other-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Dolorem perspiciatis
        </div>
      </div>
    </div>
    <div class="block">
      <div class="hidden-content">
        <p>четыре</p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.box-container {
  width: 232px;
  display: grid;
  column-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
 
.block {
  height: 50px;
  width: 50px;
  background-color: grey;
}
 
.block.active {
  background-color: orange;
}
 
.hidden-content {
  position: relative;
  display: none;
}
 
.some-other-content {
  position: absolute;
  top: 50px;
  left: 0px;
}
 
.hidden-content.active {
  display: block;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const nodes = document.querySelectorAll('.block')
const nodes_hidden = document.querySelectorAll('.hidden-content')
const delay_hidden = 8000
const showInterval = 5000
 
let node = 0
 
const hide = (node) => {
 
  let timeout = setTimeout(() => {
 
    nodes[node].classList.remove('active')
 
    nodes[node].childNodes.forEach((elem) => {
 
      if (elem.className === 'hidden-content active')
        elem.classList.remove('active')
    })
 
    clearTimeout(timeout)
  }, delay_hidden)
}
 
const show = () => {
 
  nodes[node].classList.add('active')
 
  nodes[node].childNodes.forEach((elem) => {
 
    if (elem.className === 'hidden-content')
      elem.classList.add('active')
  })
 
  hide(node)
 
  node++
  if(node >= nodes.length) node = 0
}
 
let interval = setInterval(() => {
 
  show()
 
}, showInterval)

Рандом думаю сами сможете дописать. И если спрятанный блок будет постоянно на одном уровне, можно убрать перебор нод и захардкодить нужную ноду.

Так же, все это дело можно улучшить.

Новые блоги и статьи Все статьи Все блоги /
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .