JavaSript вывод цепочки сообщений в console [требует правки]
284
21 января 2017, 13:09
Задача:
- Сделать сетку 4x4 из блоков
- Ниже расположить кнопку [start], при нажатии на которую текст в ней изменится на [in progress], а ячейки в сетке начнут переворачиваться на 180 градусов по очереди (важно заметить, что анимация следующей ячейки должна начинаться перед тем, как закончится анимация предыдущей)
- После окончания эффектов вывести сообщение об успехе и кнопку снова изменить на [start]
Всю служебную информацию записывать в консоль (старт прогресса / старт анимации ячейки / окончание анимации ячейки / окончание прогресса)
- P.S. эффект для ячеек сетки нужно реализовать на CSS
- P.S.S. если сделать сетку 4x5, ваш код должен работать
- P.S.S.S. кроссбраузерность будет плюсом
Видео с примером реализации: смотреть
У самого корректно сделать не получается, вот мой код jsfiddle
$(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 -->Answer 1
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>
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46842 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30317 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22966 visits
- Как через css изменить цвет png изображения? 10190 visits
- Blob video url download 9809 visits
- Php curl запрос через прокси с авторизацией 9070 visits
- Работа с captcha vk api 7987 visits
© "hostciti.net" 16.5.2024 | 11:57