|
Сообщение от Сергей Ракипов
|
|
таймер сбрасывает нажатие .parameters > div
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main {
width: 280px;
margin: 40px auto;
font-size: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* настройки */
.parameters .active {
color: #FF0000;
}
.parameters {
cursor: pointer;
}
/* тема */
.partition {
border: 1px solid #0e9fff;
text-align: center;
border-radius: 8px;
}
.partition>p,
.partition {
display: none;
}
.partition>p.active,
.partition.active {
display: block;
}
/* кнопка выбора темы */
.button_random {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 70px;
border: 1px solid #0e9fff;
color: #0e9fff;
cursor: pointer;
}
.button_random.active {
border-color: #008000;
}
.button_random:hover {
border: 1px solid blueviolet;
color: blueviolet;
}
.button_random:after {
content: "НУЖНО Выбрать хоть одну сферу";
}
.button_random.active:after {
content: "Случайная тема";
}
.button_random.disabled:after {
content: attr(data-time)"s";
}
</style>
</head>
<body>
<main>
<div class="control">
<div class="parameters">
<div class="all">Выбрать все</div>
<div class="reset active">Сброс</div>
<div class="sfera">Сфера жизни 1</div>
<div class="sfera">Сфера жизни 2</div>
<div class="sfera">Сфера жизни 3</div>
<div class="sfera">Сфера жизни 4</div>
<div class="sfera">Сфера жизни 5</div>
</div>
</div>
<div class="sections">
<div class="partition">
<p>Название темы по сфере 1 Вопрос №1</p>
<p>Название темы по сфере 1 Вопрос №2</p>
<p>Название темы по сфере 1 Вопрос №3</p>
<p>Название темы по сфере 1 Вопрос №4</p>
<p>Название темы по сфере 1 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 2 Вопрос №2</p>
<p>Название темы по сфере 2 Вопрос №3</p>
<p>Название темы по сфере 2 Вопрос №1</p>
<p>Название темы по сфере 2 Вопрос №4</p>
<p>Название темы по сфере 2 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 3 Вопрос №1</p>
<p>Название темы по сфере 3 Вопрос №2</p>
<p>Название темы по сфере 3 Вопрос №3</p>
<p>Название темы по сфере 3 Вопрос №4</p>
<p>Название темы по сфере 3 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 4 Вопрос №1</p>
<p>Название темы по сфере 4 Вопрос №2</p>
<p>Название темы по сфере 4 Вопрос №3</p>
<p>Название темы по сфере 4 Вопрос №4</p>
<p>Название темы по сфере 4 Вопрос №5</p>
</div>
<div class="partition">
<p>Название темы по сфере 5 Вопрос №1</p>
<p>Название темы по сфере 5 Вопрос №2</p>
<p>Название темы по сфере 5 Вопрос №3</p>
<p>Название темы по сфере 5 Вопрос №4</p>
<p>Название темы по сфере 5 Вопрос №5</p>
</div>
</div>
<div class="title_random" >
<div class="button_random">
</div>
</div>
</main>
<script>
const parameter = document.querySelector(".parameters");
const buttons = Array.from(parameter.querySelectorAll(".sfera"));
const reset = parameter.querySelector(".reset");
const all = parameter.querySelector(".all");
const random = document.querySelector(".button_random");
const sections = Array.from(document.querySelectorAll(".partition"));
const duration = 10000;
let timer, beginTime;
const loop = time => {
const end = time - beginTime ;
if(end >= duration) {
random.classList.add("active");
random.classList.remove("disabled");
}
else {
random.dataset.time = Math.trunc((duration - end)/1000);
timer = requestAnimationFrame(loop);
}
}
const select = ({ target }) => {
let disabled = random.classList.contains("disabled");
if (disabled && target) return;
let method = "";
if (target == reset) method = "remove";
if (target == all) method = "add";
if (method) buttons.forEach(button => button.classList[method]("active"))
if (buttons.includes(target)) target.classList.toggle("active");
let len = parameter.querySelectorAll(".sfera.active").length;
all.classList.toggle("active", len == buttons.length);
reset.classList.toggle("active", !len);
random.classList.toggle("active", len);
random.classList.remove("disabled");
random_title(true);
}
const random_title = (reset) => {
cancelAnimationFrame(timer);
let arr = [];
buttons.forEach((button, i) => {
const active = button.classList.contains("active");
const section = sections[i];
section.classList.remove("active");
const items = sections[i].querySelectorAll("p");
items.forEach((item, i) => item.classList.remove("active"));
const k = Math.trunc(Math.random() * items.length);
const item = items[k];
if(active) arr.push({i, item});
})
let arr_section = arr.map(({i}) => i);
arr_section = JSON.stringify(arr_section);
localStorage.setItem("arr_section", arr_section);
if(!reset){
const j = Math.trunc(Math.random() * arr.length);
const {i, item} = arr[j];
item.classList.add("active");
sections[i].classList.add("active");
random.classList.remove("active");
random.classList.add("disabled");
beginTime = performance.now();
timer = requestAnimationFrame(loop);
}
}
let arr_section = localStorage.getItem("arr_section") || "[]";
arr_section = JSON.parse(arr_section);
arr_section.forEach(i => buttons[i].classList.add("active"));
select({ target : null});
parameter.addEventListener("click", select);
random.addEventListener("click", ()=> {
let active = random.classList.contains("active");
if (!active) return;
random_title();
});
</script>
</body>
</html>
