Javascript. Delayed div creation with
Question
I'm trying to delay creation of each div by 1 sec to no avail, Can't figure out how to use setTimeout or setInterval, any help appreciated. (also, would like to position divs centered relative to each other). I'm trying to draw series of them of decreasing sizes, in each other. Any advice appreciated
var i;
var w = 400;
var delay = 3000;
$(function () {
$("#boom").click(function () {
for (w, i = 0; w >= 20; i++, w = w - 20) {
$('body').append('<div id="div' + i + '" />'); {
if (i % 2 === 0) {
$("#div" + i + "").css({
"background-color": "gold",
"position": "absolute",
"z-index": i,
"top": "20vw",
"left": "20vw",
}).width(w).height(w);
} else {
$("#div" + i + "").css({
"background-color": "chartreuse",
"position": "absolute",
"z-index": i,
"top": "20vw",
"left": "20vw",
}).width(w).height(w);
}
}
}
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kwadrat w kwadracie</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="boom">Vamos!</button>
<div id="outer"></div>
</body>
</html>
2 answers
solution1
1 2017-10-02 21:07:24
I'm not sure if I exactly understood what is your desired result, but I think this is what you are trying to achieve:
const outerDiv = document.getElementById('outer'), sizeDecrement = 20; document.getElementById('boom').addEventListener('click', event => { let lastDiv = outerDiv, size = 400; const interval = setInterval(() => { const div = document.createElement('div'); div.className = 'inner ' + (size % (2 * sizeDecrement) === 0 ? 'even' : 'odd'); [div.style.height, div.style.width] = [size + 'px', size + 'px']; lastDiv.append(div); lastDiv = div; size -= sizeDecrement; if (size < sizeDecrement) { clearInterval(interval); } }, 500); });
.inner { align-items: center; display: flex; justify-content: center; } .inner.odd { background-color: chartreuse; } .inner.even { background-color: gold; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Kwadrat w kwadracie</title> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <button id="boom">Vamos!</button> <div id="outer"></div> </body> </html>
Also, regarding your code: $(function () { is unnecessary, and so is using such an amount of per-div styling instead of creating a class and giving it those styles in style sheet.
solution2
0 2017-10-02 21:48:18
See following snippet. I hope it will help
var i = 0; var w = 400; var delay = 500; $(function () { $("#boom").click(myLoop); }); function myLoop () { setTimeout(function () { $( i === 0 ? 'body' : '#div'+(i-1)).append('<div id="div' + i + '" />'); $("#div" + i + "").css({ "background-color": i % 2 === 0 ? "gold" : "chartreuse", "position": "relative", "z-index": i, "top": i === 0 ? "20vw": "10px", "left": i === 0 ? "20vw": "10px", }).width(w).height(w); i++; w = w - 20 if (w >= 20) { myLoop(); } }, delay) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="boom">Vamos!</button> <div id="outer"></div>
See fiddle also
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.