Форум

voraa · #11 (**permalink**) 01.02.2024, 15:47

Как то так

<!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>

Сергей Ракипов · #12 (**permalink**) 02.02.2024, 14:37

voraa,
Спасибо это не совсем то, но думаю что из этого я под себя подгоню

Сергей Ракипов · #13 (**permalink**) 02.02.2024, 16:00

Что то не очень получается

Ну вот если кто то сможет вникнуть https://youtu.be/J6Tzqn9GrX0
видео 2 минуты

И вот не посредственно если кому то будет интересно посмотреть что за код https://rakipov.ru/web/fact/

ruslan_mart · #14 (**permalink**) 02.02.2024, 19:11

Сергей Ракипов, то что я скидывал в своём сообщении - тоже не то?

voraa · #15 (**permalink**) 02.02.2024, 20:46

Сообщение от Сергей Ракипов

это не совсем то,

А вы четко напишите (можно с примерами), что должно быть "тем"

Сергей Ракипов · #16 (**permalink**) 06.02.2024, 17:37

Не получается.

Есть блоки с фактами, я хочу показывать их раз в сутки.
Факты должны показываться в случайно порядке и два раза один и тот же факт показывать не нужно.
Когда человеку показали один факт у него одни сутки запрет на показ случайных фактов. Но то что ему уже было показано прятать от него не нужно. А просто сказать ему что типа пока не покажу.

Вот тут факты class="fact_block"
Вот тут блок с ограничением
<div class="limitation">
Достигнуто суточное ограничение
</div>

НО не прятать от него последний факт, просто прекратить случайного показа.

Сергей Ракипов · #17 (**permalink**) 06.02.2024, 17:40

вот показан показан факт и показано что идет суточное ограничение

Сергей Ракипов · #18 (**permalink**) 07.02.2024, 11:38

Техническое задание для скрипта показа случайного блока:

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(): функция

voraa · #19 (**permalink**) 08.02.2024, 20:33

Вряд ли, кто такое будет делать. Тем более, что иногда написана чушь.
Типа

Сообщение от Сергей Ракипов

- Вызвать функцию removeShowClass() для удаления класса "show" у всех блоков.

А он у них есть этот класс?
Иногда просто непонятно.

Сообщение от Сергей Ракипов

Если у выбранного блока есть соответствующий блок с ID, начинающимся с "mini_", добавляет ему класс "fact_picture_mini_curr" и сохраняет его ID в отдельный массив в localStorage.

Я такого в вашем html не нашел. Или чего то не понял.
Допустим мы как то нашли такой блок и присвоили ему класс fact_picture_mini_curr
Читаем далее

Сообщение от Сергей Ракипов

- Проверить наличие ID блоков с классом "fact_picture_mini_curr" в массиве "factPictureMiniCurrIds" из localStorage. Если такие ID есть, добавить класс "fact_picture_mini_curr" этим блокам.

Он один такой блок с таким классом. И кому опять добавляется этот класс, если у этого одного блока он уже есть?

Ну еще не понятно. Есть блоки с классом fact_block. Некоторые из них имеют id типа "fact_0004", а некоторые "curr_0004". С последними как быть? Вы пишете только про id имеющий "fact_"

Вообще можно было бы ограничиться п.8 Только четче его описать. Там непонятно, какую картинку показывать вместе с блоком. Что быдет после показа "full_collection". Всегда, сколько бы дальше человек не заходил показывать только это? (Странное решение)

А как писать, в какие массивы, какими функциями - это дело программера

Сергей Ракипов · #20 (**permalink**) 09.02.2024, 10:53

voraa,
понимаю это, я пошел другим путем

Форум

Справочник

Discord чат

Курсы javascript