Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2019, 23:46
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 60

Вставить таймер в нужное место
Есть скрипт. При клике по карточке она переворачивается обратной стороной. Максимум может быть перевернуто сразу 2 карточки. После того, как вторая карточка перевернулась должен запускаться таймер с установленным временем, через которое он запускает функцию возвращающую все карточки в исходное положение.
Не могу разобраться, куда вставить эту функцию с таймером. Там, где она сейчас стоит (называется start()), это неправильное место. Там она срабатывает только после клика по третьей карточке после открытия второй.
let cardItems = document.querySelectorAll('.card__item');
	let cardItemBack = document.querySelectorAll('.card__item--back');
	let cardItemFront = document.querySelectorAll('.card__item--front');
	let count = 0; // количество перевернутых карточек

	const cardsClick = () => {
		for (let i = 0, lenth = cardItems.length; i < lenth; i++) { 
			cardItems[i].addEventListener('click', () => {
				if (count < 2) {
					cardItemFront[i].style.transform = 'rotateY(180deg)';
					cardItemBack[i].style.transform = 'rotateY(360deg)';
					count += 1;
					console.log(cardItemBack[i], cardItemFront[i]);
					console.log(count);	
				} else {
					start();
				}
			});
		}
	};
	cardsClick();

	const turnBackCards = () => {
		for (let j = 0, lenth = cardItems.length; j < lenth; j++) {
			cardItemFront[j].style.transform = 'rotateY(0)';
			cardItemBack[j].style.transform = 'rotateY(180deg)';
			count = 0;
			console.log(count);
		}
	};

	const start = () => {
		window.setTimeout(turnBackCards, 500);
	}
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2019, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,285

DVV,
сделайте минимальный макет.
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2019, 00:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,285

DVV,
let cardItems = [...document.querySelectorAll('.card__item')], current, timer;
cardItems.forEach(card => card.addEventListener('click', () => {
clearTimeout(timer);
if(current) current.classList.remove('rotate');// тут должна быть проверка на совпадение
timer = setTimeout(()=> card.classList.remove('rotate'), 500);
current = card;
card.classList.add('rotate');
}))
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2019, 15:09
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 60

Если честно, то немного не понял такого подхода. Сложновато для меня, наверное, пока еще такой скрипт. Кроме того, тут идет присваивание класса, а я через js стили меняю. Решил эту проблему другим путем. Все заработало)

let cardItems = document.querySelectorAll('.card__item');
	let cardItemBack = document.querySelectorAll('.card__item--back');
	let cardItemFront = document.querySelectorAll('.card__item--front');
	let count = 0;

	const cardsClick = () => {
		for (let i = 0, lenth = cardItems.length; i < lenth; i++) { 
			cardItems[i].addEventListener('click', () => {
				if (count < 2) {
					cardItemFront[i].style.transform = 'rotateY(180deg)';
					cardItemBack[i].style.transform = 'rotateY(360deg)';
					count += 1;
					console.log(cardItemBack[i], cardItemFront[i]);
					console.log(count);	
					if (count >= 2) {
						start();
					}
				}
			});
		}
	};
	cardsClick();

	const turnBackCards = () => {
		for (let j = 0, lenth = cardItems.length; j < lenth; j++) {
			cardItemFront[j].style.transform = 'rotateY(0)';
			cardItemBack[j].style.transform = 'rotateY(180deg)';
			count = 0;
			console.log(count);
		}
	};

	const start = () => {
		window.setTimeout(turnBackCards, 2000);
	}
Ответить с цитированием
  #5 (permalink)  
Старый 25.06.2019, 16:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,285

открыть пару, макет, filip, игра
Сообщение от DVV
не понял такого подхода.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  * { margin: 0; padding: 0; }

.container {
  margin: 20px auto;
  position: relative;
  display : flex;
  flex-wrap: wrap;
  justify-content: space-around;
  perspective: 600px;
}

.card {
  width: 120px;
  height: 180px;
  margin: 8px;
  transition: transform 0.5s 0.5s;
  transform-style: preserve-3d;

}
.card.flip{
  transform: rotateY( 180deg );
  transition-delay: 0s;
}

figure {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  backface-visibility: hidden;
}
.back {
  background-image: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
  background-image: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
  transform: rotateY( 180deg );
}
  </style>
  <script>
document.addEventListener("DOMContentLoaded", () => {
let cardItems = [...document.querySelectorAll('.card')], current, timer;
cardItems.forEach(card => card.addEventListener('click', () => {
clearTimeout(timer);
if(current) current.classList.remove('flip');// тут должна быть проверка на совпадение
timer = setTimeout(()=> card.classList.remove('flip'), 1500);
card.classList.add('flip');
current = card;
}))
})

  </script>
</head>

<body>
<div class="container" id="container">
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить курсор в нужное место? DivMan Events/DOM/Window 0 12.02.2019 19:41
Как вставить в определённое место БД? j.r.r Общие вопросы Javascript 3 05.07.2013 20:06
Как вставить теги в нужное место? SFproG Элементы интерфейса 10 08.02.2013 09:25
Как вставить тег в нужное место div-a Krjemelik Элементы интерфейса 12 08.09.2012 21:14
Как два раза вставить таймер alexvost Общие вопросы Javascript 2 08.02.2011 01:28