-11

Вот задание по JavaScript, которое я пытаюсь решить.

Задача:

  1. Сделать сетку 4x4 из блоков.
  2. Ниже расположить кнопку [start], при нажатии на которую текст в ней изменится на [in progress], а ячейки в сетке начнут переворачиваться на 180 градусов по очереди (важно заметить, что анимация следующей ячейки должна начинаться перед тем, как закончится анимация предыдущей).
  3. После окончания эффектов вывести сообщение об успехе и кнопку снова изменить на [start].
  4. Всю служебную информацию записывать в консоль (старт прогресса / старт анимации ячейки / окончание анимации ячейки / окончание прогресса).

    • P.S. эффект для ячеек сетки нужно реализовать на CSS.
    • P.S.S. если сделать сетку 4x5, ваш код должен работать.
    • P.S.S.S. кроссбраузерность будет плюсом.

Видео с примером реализации: смотреть.

===

Мой старый код(можно не смотреть, тогда я еще почти не знал JavaScript):
*Ответ пользователя wNow шел для этого кода(точнее он все полностью за меня написал, за что ему благодарность).

$(document).ready(function() {
  $('button.action').click(function() {
    console.log('---PROGRESS START---');
    console.log('Cell 1 Animation START');
    $("tr.one td:nth-child(1)").addClass("takeover");
    window.setTimeout(function() {
      console.log('Cell 1 Animation END');
    }, 1200);
    window.setTimeout(function() {
      console.log('Cell 2 Animation START');
      $("tr.one td:nth-child(2)").addClass("takeover")
    }, 300);
    window.setTimeout(function() {
      console.log('Cell 2 Animation END');
    }, 1500);
    window.setTimeout(function() {
      console.log('Cell 3 Animation START');
      $("tr.one td:nth-child(3)").addClass("takeover")
    }, 600);;
    window.setTimeout(function() {
      console.log('Cell 3 Animation END');
    }, 1800);
    window.setTimeout(function() {
      console.log('Cell 4 Animation START');
      $("tr.one td:nth-child(4)").addClass("takeover")
    }, 900);
    window.setTimeout(function() {
      console.log('Cell 4 Animation END');
    }, 2100);

    window.setTimeout(function() {
      console.log('Cell 5 Animation START');
      $("tr.two td:nth-child(1)").addClass("takeover")
    }, 1200);
    window.setTimeout(function() {
      console.log('Cell 5 Animation END');
    }, 2400);
    window.setTimeout(function() {
      console.log('Cell 6 Animation START');
      $("tr.two td:nth-child(2)").addClass("takeover")
    }, 1500);;
    window.setTimeout(function() {
      console.log('Cell 6 Animation END');
    }, 2700);
    window.setTimeout(function() {
      console.log('Cell 7 Animation START');
      $("tr.two td:nth-child(3)").addClass("takeover")
    }, 1800);
    window.setTimeout(function() {
      console.log('Cell 7 Animation END');
    }, 3000);
    window.setTimeout(function() {
      console.log('Cell 8 Animation START');
      $("tr.two td:nth-child(4)").addClass("takeover")
    }, 2100);
    window.setTimeout(function() {
      console.log('Cell 8 Animation END');
    }, 3300);

    window.setTimeout(function() {
      console.log('Cell 9 Animation START');
      $("tr.three td:nth-child(1)").addClass("takeover")
    }, 2400);
    window.setTimeout(function() {
      console.log('Cell 9 Animation END');
    }, 3600);
    window.setTimeout(function() {
      console.log('Cell 10 Animation START');
      $("tr.three td:nth-child(2)").addClass("takeover")
    }, 2700);;
    window.setTimeout(function() {
      console.log('Cell 10 Animation END');
    }, 3900);
    window.setTimeout(function() {
      console.log('Cell 11 Animation START');
      $("tr.three td:nth-child(3)").addClass("takeover")
    }, 3000);
    window.setTimeout(function() {
      console.log('Cell 11 Animation END');
    }, 4200);
    window.setTimeout(function() {
      console.log('Cell 12 Animation START');
      $("tr.three td:nth-child(4)").addClass("takeover")
    }, 3300);
    window.setTimeout(function() {
      console.log('Cell 12 Animation END');
    }, 4500);

    window.setTimeout(function() {
      console.log('Cell 13 Animation START');
      $("tr.four td:nth-child(1)").addClass("takeover")
    }, 3600);
    window.setTimeout(function() {
      console.log('Cell 13 Animation END');
    }, 4800);
    window.setTimeout(function() {
      console.log('Cell 14 Animation START');
      $("tr.four td:nth-child(2)").addClass("takeover")
    }, 3900);;
    window.setTimeout(function() {
      console.log('Cell 14 Animation END');
    }, 5100);
    window.setTimeout(function() {
      console.log('Cell 15 Animation START');
      $("tr.four td:nth-child(3)").addClass("takeover")
    }, 4200);
    window.setTimeout(function() {
      console.log('Cell 15 Animation END');
    }, 5400);
    window.setTimeout(function() {
      console.log('Cell 16 Animation START');
      $("tr.four td:nth-child(4)").addClass("takeover")
    }, 4500);
    window.setTimeout(function() {
      console.log('Cell 16 Animation END');
      console.log('---PROGRESS END---');
    }, 5700);
  });
  /*#############################################*/
});
body {
  background-color: #212120;
}


/* begin Content */

.content {
  margin-top: 200px;
  text-align: center;
}

.content table {
  margin: auto;
}

.content table tbody tr td {
  padding: 20px 40px;
  background-color: #4989C7;
  color: #fff;
  font-size: 30px;
  border: 5px solid #212120;
  vertical-align: middle;
  text-align: center;
}

.content table tbody tr td.takeover {
  transform: rotateX(180deg);
  transition: 1.2s;
}

.content button {
  background-color: #4989C7;
  color: #fff;
  border: none;
  font-size: 20px;
  padding: 10px 20px;
  margin-top: 20px;
}

.content button:hover {
  cursor: pointer;
  opacity: 0.9;
}


/* end Content */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin Content -->
<div class="content">
  <!-- begin Table -->
  <table>
    <tbody>
      <tr class="one">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr class="two">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr class="three">
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr class="four">
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
      </tr>
    </tbody>
  </table>
  <!-- end Table -->
  <button class="action" type="button"><span>start</span></button>
</div>
<!-- end Content -->

======= Обновлено 30.03.17 =======

Получив знания по JavaScript, написал данный код(по нему и будет вопрос):

'use strict';

function startFliping() {
  var score = 0;
  screen.innerHTML += '-- PROGRESS START -- <br>';
  button.innerHTML = 'in progress';

  (function flip() {
    var thisScore = score;
    var td = tdList[thisScore];

    if (thisScore != tdList.length) {
      screen.innerHTML += 'Cell ' + (thisScore + 1) + ' Animation START <br>';
      screen.scrollTop += screen.offsetHeight; // Добавил скролл, в задании нет, но на видео есть.
      td.style.transition = '1s';
      td.style.transform = 'rotateX(180deg)';

      td.addEventListener('transitionend', function() { // Отслеживаю окончание анимации.
        screen.innerHTML += 'Cell ' + (thisScore + 1) + 'Animation END <br>';
        screen.scrollTop += screen.offsetHeight;

        if (thisScore + 1 == tdList.length) { // Здесь проверка, если подходит, завершаем.
          screen.innerHTML += '-- PROGRESS END -- <br>';
          alert('sucess');
          button.innerHTML = 'start';
          screen.scrollTop += screen.offsetHeight;

          for (var i = 0, length1 = tdList.length; i < length1; i++) {
            tdList[i].style.transition = '0s';
            tdList[i].style.transform = 'rotateX(0)';
          }
        };

      });

      score++;
      setTimeout(flip, 200);
    };
    return;
  })();

};

var flipFlops = document.querySelector('.flipFlops');
var button = flipFlops.querySelector('.button');
var screen = flipFlops.querySelector('.screen');
var tdList = flipFlops.querySelectorAll('td');

button.addEventListener('click', startFliping);
body {
  background-color: #f1f1f1;
}

td {
  padding: 40px;
  color: white;
  background: #4289CE;
}

p {
  margin: 0;
}

.flipFlops {
  text-align: center;
}

table {
  margin: auto;
}

.screen {
  padding: 10px;
  text-align: left;
  background: #4289CE;
  color: #fff;
  width: 380px;
  height: 200px;
  overflow-y: scroll;
  margin: 20px auto;
}

.button {
  padding: 10px 50px;
  background: #4289CE;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
}

.button:hover {
    cursor: pointer;
    opacity: 0.9;
  }
<div class="flipFlops">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </table>
  <div class="screen"></div>
  <a class="button">start</a>
</div>

  • Использовал рекурсию.
  • Добавил комментарии в код.
  • Я новичок в js.

Мой вопрос: Первый раз запускаем, все как надо, но если еще запустить(без перезагрузки страницы), то появляется баг, а именно двойные надписи Animation END и двойной alert, третий раз запускаем уже три раза и т.д.(хочется чтобы было как при первом запуске). Я долго с этим возился, предполагаю, что проблема с addEventListener('transitionend' Как поправить не знаю, буду рад получить помощь(хочу узнать из-за чего ошибка и можно ли поправить не меняя сильно код).

15
  • в чём заключается проблема и ваши вопросы?
    – MasterAlex
    20 янв 2017 в 11:25
  • 4
    @alexandrkazakov, если вам нужно просто сделать за вас задание, то нужный вам ресурс это сайт фрилансеров. А здесь людям помогают достичь того, чтобы они сами могли делать такие задания, вы же изначально просто скинули ТЗ без кода и вопросов. Поэтому такие комментарии и минуса.
    – MasterAlex
    20 янв 2017 в 13:06
  • 1
    @alexandrkazakov дело в том, что много людей приходят и ставят именно задачи, чтобы за них сделали, при этом не приложив ни грамма усилий. Поэтому то, что в теле вопроса есть текст еще не значит, что это — вопрос. А раз вам наставили минусы, то наверное это не значит, что Здесь скорее вопрос о нашем понимании русского языка . Эт как раз вопрос к тому, как вы оформили вопрос. Вам стоит прочитать справку как задавать вопросы. Как новичок, кстати, вас после регистрации должно было о данном разделе уведомить и вы бы после прочтения оформили лучше всё ;-) 20 янв 2017 в 14:09
  • 3
    Ужас, единственному кто мне помог и ответил, за ответ минус влепили, что здесь происходит ... Спасибо тебе wNow ! 20 янв 2017 в 15:17
  • 1
    Ответа на новый вопрос не дождался, решил сам задачу. Не стоило конечно addEventListener('transitionend... во внутрь той функции записывать ) Что интересно, после повторного открытия данного вопроса, из поставивших минус людей, только один написал небольшой комментарий здесь, и ни один не написал на мете. Хорошо, что есть и те, кто плюсы поставил. В таком случае награда достается wNow, как единственному кто дал ответ. Получается, не так это и плохо, помочь новичку с одним единственным сообщением. 4 апр 2017 в 23:58

1 ответ 1

3
+100

function get(elem) {
  return document.getElementById(elem)
};
get('button').onclick = function() {
  get('console').innerHTML += '-- PROGRESS START --<br>';
  get('button').innerHTML = 'in progress';
  setTimeout(function() {
    alert('success');
    get('console').innerHTML += '-- PROGRESS END --<br>';
    for (var i = 0; i < 16; i++) {
      get(i).style.transform = 'rotateX(0)';
      get(i).style.transition = '0s';
      get('button').innerHTML = 'start';
    }
  }, 2100);
  for (var i = 0; i < 16; i++) {
    get(i).style.transition = '0.5s';
    var t = i * 100;
    setTimeout(function(i) {
      get(i).style.transform = 'rotateX(180deg)';
      get('console').innerHTML += 'cell ' + (i + 1) + ' animation START<br>';
      setTimeout(function(i) {
        get('console').innerHTML += 'cell ' + (i + 1) + ' animation END<br>';
      }, 500, i)
    }, t, i);
  }
}
td {
  perspective: 400px;
}
td div {
  text-align: center;
  padding: 40px;
  color: white;
  background: #00accc;
  transition: 0.5s;
}
#console {
  background: #ddd;
  width: 400px;
  overflow: scroll;
  height: 200px;
}
#button {
  padding: 10px;
  background: #00accc;
  margin-left: 150px;
}
<html>

<body>
  <table>
    <tr>
      <td>
        <div id='0'>1</div>
      </td>
      <td>
        <div id='1'>2</div>
      </td>
      <td>
        <div id='2'>3</div>
      </td>
      <td>
        <div id='3'>4</div>
      </td>
    </tr>
    <tr>
      <td>
        <div id='4'>5</div>
      </td>
      <td>
        <div id='5'>6</div>
      </td>
      <td>
        <div id='6'>7</div>
      </td>
      <td>
        <div id='7'>8</div>
      </td>
    </tr>
    <tr>
      <td>
        <div id='8'>9</div>
      </td>
      <td>
        <div id='9'>10</div>
      </td>
      <td>
        <div id='10'>11</div>
      </td>
      <td>
        <div id='11'>12</div>
      </td>
    </tr>
    <tr>
      <td>
        <div id='12'>13</div>
      </td>
      <td>
        <div id='13'>14</div>
      </td>
      <td>
        <div id='14'>15</div>
      </td>
      <td>
        <div id='15'>16</div>
      </td>
    </tr>
  </table>
  <div id='console'>
  </div>
  <a id='button'>
start
</a>
</body>

</html>

1
  • 2
    Пожалуйста, когда сниппет создаёте, нажимайте кнопку «привести в порядок». Форматирование кода очень помогает его читать.
    – Nick Volynkin
    15 фев 2017 в 4:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.