Как то так
<!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>
|
voraa,
Спасибо это не совсем то, но думаю что из этого я под себя подгоню |
Что то не очень получается
Ну вот если кто то сможет вникнуть https://youtu.be/J6Tzqn9GrX0 видео 2 минуты И вот не посредственно если кому то будет интересно посмотреть что за код https://rakipov.ru/web/fact/ |
Сергей Ракипов, то что я скидывал в своём сообщении - тоже не то?
|
Цитата:
|
Не получается.
Есть блоки с фактами, я хочу показывать их раз в сутки. Факты должны показываться в случайно порядке и два раза один и тот же факт показывать не нужно. Когда человеку показали один факт у него одни сутки запрет на показ случайных фактов. Но то что ему уже было показано прятать от него не нужно. А просто сказать ему что типа пока не покажу. Вот тут факты class="fact_block" Вот тут блок с ограничением <div class="limitation"> Достигнуто суточное ограничение </div> НО не прятать от него последний факт, просто прекратить случайного показа. |
Вложений: 1
вот показан показан факт и показано что идет суточное ограничение
|
Техническое задание для скрипта показа случайного блока:
1. Описание задачи: Необходимо разработать скрипт, который будет отображать случайный блок из массива блоков на веб-странице. Каждый блок имеет класс "fact_block". При показе блока также должен быть сохранен его ID в localStorage. Если блок имеет класс "fact_picture_mini_curr", его ID также должен быть сохранен в отдельный массив "fact_picture_mini_curr" в localStorage. 2. Входные данные: - Массив блоков с классом "fact_block" - localStorage для сохранения показанных блоков и блоков с классом "fact_picture_mini_curr" 3. Выходные данные: - Отображение случайного блока на веб-странице - Сохранение ID показанного блока в localStorage - Сохранение ID блока с классом "fact_picture_mini_curr" в отдельный массив в localStorage 4. Описание функций: - getShownBlocks(): функция для получения уже показанных блоков из localStorage. Если такие блоки есть, возвращает массив ID блоков. Если таких блоков нет, возвращает пустой массив. - saveShownBlock(blockId): функция для сохранения ID показанного блока. Получает ID блока и добавляет его в массив показанных блоков в localStorage. Если блок имеет класс "fact_picture_mini_curr", также сохраняет его ID в отдельный массив в localStorage. - removeShowClass(): функция для удаления класса "show" у всех блоков. Проходит по массиву блоков и удаляет класс "show" у каждого блока. - showRandomBlock(): функция для выбора и показа случайного блока. Получает массив показанных блоков и фильтрует массив блоков, оставляя только доступные блоки (которые еще не показаны и имеют ID, содержащий "fact_"). Если доступных блоков нет, показывает последний блок с ID "full_collection". Иначе, выбирает случайный блок из доступных, добавляет ему класс "show" и сохраняет его ID с помощью функции saveShownBlock(). Если у выбранного блока есть соответствующий блок с ID, начинающимся с "mini_", добавляет ему класс "fact_picture_mini_curr" и сохраняет его ID в отдельный массив в localStorage. 5. Шаги выполнения: - Получить все блоки с классом "fact_block" и сохранить их в массив "blocks". - Вызвать функцию removeShowClass() для удаления класса "show" у всех блоков. - Вызвать функцию showRandomBlock() для выбора и показа случайного блока. - Проверить наличие ID блоков с классом "fact_picture_mini_curr" в массиве "factPictureMiniCurrIds" из localStorage. Если такие ID есть, добавить класс "fact_picture_mini_curr" этим блокам. 6. Требования к localStorage: - Ключ "shownBlocks" для хранения массива ID показанных блоков. - Ключ "fact_picture_mini_curr" для хранения массива ID блоков с классом "fact_picture_mini_curr". 7. Тестирование: - Убедиться, что случайный блок отображается на веб-странице при каждом обновлении страницы. - Убедиться, что ID показанного блока сохраняется в localStorage. - Убедиться, что блоки с классом "fact_picture_mini_curr" также сохраняются и отображаются правильно. 8. Ограничение показа случайного блока: - Предусмотреть ограничение показа случайного блока один раз в 10 минут. - Проверять время последнего показа случайного блока в localStorage. - Если время последнего показа блока меньше 10 минут назад, не показывать новый случайный блок и продолжать отображать предыдущий блок. - Если время последнего показа блока больше или равно 10 минут назад, показывать новый случайный блок и обновлять время последнего показа в localStorage. 9. Дополнительные функции: - getLastShownTime(): функция для получения времени последнего показа случайного блока из localStorage. Возвращает время в миллисекундах или 0, если время не сохранено. - saveLastShownTime(): функция |
Вряд ли, кто такое будет делать. Тем более, что иногда написана чушь.
Типа Цитата:
Иногда просто непонятно. Цитата:
Допустим мы как то нашли такой блок и присвоили ему класс fact_picture_mini_curr Читаем далее Цитата:
Ну еще не понятно. Есть блоки с классом fact_block. Некоторые из них имеют id типа "fact_0004", а некоторые "curr_0004". С последними как быть? Вы пишете только про id имеющий "fact_" Вообще можно было бы ограничиться п.8 Только четче его описать. Там непонятно, какую картинку показывать вместе с блоком. Что быдет после показа "full_collection". Всегда, сколько бы дальше человек не заходил показывать только это? (Странное решение) А как писать, в какие массивы, какими функциями - это дело программера |
voraa,
понимаю это, я пошел другим путем |
| Часовой пояс GMT +3, время: 03:22. |