Ну вот такой работающий вариант. Просто, как пример. Ваш код слишком большой для изучения
(Интервал установлен в 15 сек
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Блоки</title>
<style>
.fact_block {
position: relative;
width: 300px;
height: 200px;
border: 1px solid blue;
display: none;
}
.final_block {
border: 1px solid red;
}
.show {
display: block;
}
</style>
</head>
<body>
<div id="f1" class="fact_block">Block 1</div>
<div id="f2" class="fact_block">Block 2</div>
<div id="f3" class="fact_block">Block 3</div>
<div id="f4" class="fact_block">Block 4</div>
<div id="f5" class="fact_block">Block 5</div>
<div id="f6" class="fact_block">Block 6</div>
<div id="f7" class="fact_block">Block 7</div>
<div id="f8" class="fact_block">Block 8</div>
<div id="f9" class="fact_block">Block 9</div>
<div id="final" class="fact_block final_block">Final Block</div>
<script>
function showRandomBlock() {
const INTERVAL = 15 * 1000; // 15s; 10 * 60 * 60 * 1000 = 10h
const KEY_SHOWNBLOCKS = 'key-shown-blocks';
const KEY_LASTTIMESHOW = 'last-tyme-show';
const getShownBlocks = () => {
let s = window.localStorage.getItem(KEY_SHOWNBLOCKS);
return s ? JSON.parse(s) : [];
};
const addShownBlocks = (idblock) => {
const blocks = getShownBlocks();
blocks.push(idblock);
window.localStorage.setItem(
KEY_SHOWNBLOCKS,
JSON.stringify(blocks)
);
};
const getLastTime = () => {
let s = window.localStorage.getItem(KEY_LASTTIMESHOW);
return s ? Number(s) : 0;
};
const setLastTime = () => {
const time = Date.now();
window.localStorage.setItem(KEY_LASTTIMESHOW, time);
};
const showBlock = (id) => {
document.getElementById(id).classList.add('show');
};
const showLastBlock = () => {
const shownBlocks = getShownBlocks();
const id = shownBlocks.at(-1);
showBlock(id);
};
const getRandomInt = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
};
const showNewBlock = () => {
const factBlocks = [
...document.querySelectorAll(
'.fact_block:not(.final_block)'
),
].map((block) => block.id);
const shownBlocks = getShownBlocks();
const availableBlocks = factBlocks.filter(
(id) => !shownBlocks.includes(id)
);
if (availableBlocks.length === 0) {
const idlast = document.querySelector('.final_block').id
showBlock(idlast)
} else {
const index = getRandomInt(0, availableBlocks.length);
const idblock = availableBlocks[index];
showBlock(idblock);
addShownBlocks(idblock);
setLastTime();
}
};
const lastTime = getLastTime();
if (lastTime + INTERVAL < Date.now()) {
showNewBlock();
} else {
showLastBlock();
}
}
showRandomBlock();
</script>
</body>
</html>
Блоки, которые могут показываться должны иметь класс 'fact_block'. Заключительный блок, кроме этого должен иметь класс 'final_block'. Для показа блока, ему добавляется класс 'show'