Время выполнения

[Сергей Ракипов]

Ну может кто поймет

const factBlocks = document.querySelectorAll('.fact_block');
const limitationElement = document.querySelector('.limitation');
const endBlock = document.querySelector('.fact_end');

const blocks = Array.from(factBlocks);

function getShownBlocksData() {
  const shownBlocksData = localStorage.getItem('shownBlocks');
  return shownBlocksData ? JSON.parse(shownBlocksData) : { blocks: [], lastGenerationTime: null };
}

function saveShownBlock(blockId) {
  const shownBlocksData = getShownBlocksData();
  shownBlocksData.blocks.push(blockId);
  shownBlocksData.lastGenerationTime = new Date().toISOString();
  localStorage.setItem('shownBlocks', JSON.stringify(shownBlocksData));
}

function removeShowClass() {
  blocks.forEach(block => block.classList.remove('show'));
  limitationElement.classList.remove('show');
}

function shouldShowLimitation() {
  const shownBlocksData = getShownBlocksData();
  if (shownBlocksData.lastGenerationTime) {
    const lastUpdateTime = new Date(shownBlocksData.lastGenerationTime);
    const currentTime = new Date();
    const timeDiff = currentTime - lastUpdateTime;
    return timeDiff < 2000;
  }
  return false;
}

function showRandomBlock() {
  const shownBlocksData = getShownBlocksData();
  const shownBlocks = shownBlocksData.blocks;
  const availableBlocks = blocks.filter(block => !shownBlocks.includes(block.id));

  if (shouldShowLimitation()) {
    limitationElement.classList.add('show');
    if (shownBlocks.length > 0) {
      const lastShownBlockId = shownBlocks[shownBlocks.length - 1];
      const lastShownBlock = blocks.find(block => block.id === lastShownBlockId);
      if (lastShownBlock) {
        lastShownBlock.classList.add('show');
      }
    }
    return;
  }

  if (availableBlocks.length === 0) {
    endBlock.classList.add('show');
  } else {
    const randomBlock = availableBlocks[Math.floor(Math.random() * availableBlocks.length)];
    randomBlock.classList.add('show');
    saveShownBlock(randomBlock.id);
  }
}

removeShowClass();
showRandomBlock();


function updateMiniPicturesClass() {

  // Получаем уже показанные номера из localStorage
  const shownBlocksData = getShownBlocksData();
  const shownBlocks = shownBlocksData.blocks;

  // Перебираем все миниатюры
  shownBlocks.forEach(index => {
    // Форматируем ID, добавляя ведущие нули к номеру
    const miniId = `mini_${index.toString().padStart(4, '0')}`;
    const miniElement = document.getElementById(miniId);

    // Если элемент найден, меняем его класс
    if (miniElement) {
      miniElement.classList.remove('fact_picture_mini');
      miniElement.classList.add('fact_picture_mini_curr');
    }
  });
}

updateMiniPicturesClass();


function changeClass() {
  let currentBlock = document.querySelector('.current');
  currentBlock.classList.add('close');
}
let closeButton = document.querySelector('.close_curr');
closeButton.addEventListener('click', changeClass);

Он вот как работает

1. const factBlocks = document.querySelectorAll('.fact\_block'); - Этот код выбирает все элементы с классом 'fact_block' на веб-странице.

2. const limitationElement = document.querySelector('.limitation'); - Этот код выбирает элемент с классом 'limitation'.

3. const endBlock = document.querySelector('.fact\_end'); - Этот код выбирает элемент с классом 'fact_end'.

4. const blocks = Array.from(factBlocks); - Этот код преобразует выбранные элементы в массив.

5. function getShownBlocksData() { - Эта функция получает данные о показанных блоках из localStorage. Если данные не найдены, она возвращает пустой объект.

6. function saveShownBlock(blockId) { - Эта функция сохраняет id текущего блока в localStorage.

7. function removeShowClass() { - Эта функция удаляет класс 'show' со всех блоков и элемента 'limitation'.

8. function shouldShowLimitation() { - Эта функция определяет, следует ли показывать элемент 'limitation'. Она проверяет, прошло ли более 2 секунд с момента последнего обновления.

9. function showRandomBlock() { - Эта функция показывает случайный блок, который еще не был показан. Если элемент 'limitation' должен быть показан, он также добавляется в класс 'show'.

10. removeShowClass(); - Эта строка кода вызывает функцию removeShowClass(), чтобы удалить класс 'show' со всех блоков и элемента 'limitation'.

11. showRandomBlock(); - Эта строка кода вызывает функцию showRandomBlock(), чтобы показать случайный блок.

12. function updateMiniPicturesClass() { - Эта функция обновляет классы миниатюр, чтобы показать, какие блоки уже были показаны.

13. updateMiniPicturesClass(); - Эта строка кода вызывает функцию updateMiniPicturesClass(), чтобы обновить классы миниатюр.

14. function changeClass() { - Эта функция меняет класс текущего блока на 'close'.

15. let closeButton = document.querySelector('.close\_curr'); - Эта строка кода выбирает элемент с классом 'close_curr'.

16. closeButton.addEventListener('click', changeClass); - Эта строка кода добавляет обработчик событий на элемент 'close_curr', который вызывает функцию changeClass() при клике

[Сергей Ракипов]

И нужно

У меня есть несколько блоков с классом fact_picture_mini и несколько блоков с классом нужно fact_curr. Нужно чтобы при клике на блок с классом fact_picture_mini нужно чтобы к блоку с классом fact_curr присвоился класс show.
... ВОТ ТУТ НАДО КАК ТО НАХОДИТЬ ПО ИДЕНТИЧНОМУ АЙДИ
Если пользователь кликает на другой блок fact_picture_mini то тому что было присвоен класс show, удалить этот класс show.

[Сергей Ракипов]

Кликнув куда то сюда

<div class="fact_picture_mini" id="mini_fact_0000">
				<img src="picture/plane_0.jpg" width="100%" alt="">
			</div>
			<div class="fact_picture_mini" id="mini_fact_0001">
				<img src="picture/plane_1.jpg" width="100%" alt="">
			</div>

открылся какой то из этих

<div class="fact_curr" id="curr_0000">
				<div class="fact_title">
					<p>1 факт</p>
					<p>Лобовое стекло кабины Boeing 747-400</p>
				</div>
				<div class="fact_content">
					Одно лобовое стекло или оконная рама кабины Boeing 747-400 стоят столько же, сколько автомобиль BMW
				</div>
				<div class="fact_picture">
					<img src="picture/plane_0.jpg" alt="">
				</div>
				<div class="fact_source">
					<a href="https://novate.ru/blogs/180316/35535/" target="_parent">Источник</a>
				</div>
			</div>

			<div class="fact_curr" id="curr_0001">
				<div class="fact_title">
					<p>2 факт</p>
					<p>Инверсионный след</p>
				</div>
				<div class="fact_content">
					Инверсионный след, который самолеты оставляют позади себя, состоит из водяного пара. Тонкий след говорит о
					том, что сейчас низкая влажность воздуха и ясная погода. А толстый, более длинный след может являться ранним
					признаком шторма.
				</div>
				<div class="fact_picture">
					<img src="picture/plane_1.jpg" alt="">
				</div>
				<div class="fact_source">
					<a href="https://novate.ru/blogs/180316/35535/" target="_parent">Источник</a>
				</div>
			</div>

то есть по айди где цифры 0000, 0001 идентичны друг другу

[Сергей Ракипов]

Решил задачу