Как то так
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Блоки</title>
<style>
.limitation,
.fact_block {
position: relative;
width: 300px;
height: 200px;
border: 1px solid blue;
display: none;
}
.limitation {
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="Limit" class="limitation">Limit 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 showLimitationBlock = () => {
const idlimit = document.querySelector('.limitation').id
showBlock(idlimit);
};
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) {
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 {
showLimitationBlock();
}
}
showRandomBlock();
</script>
</body>
</html>