我试图将每个 div 的创建延迟 1 秒但无济于事，无法弄清楚如何使用 setTimeout 或 setInterval，感谢任何帮助。 (另外，想要将 div 相对于彼此居中定位)。 我试图在彼此之间绘制一系列尺寸递减的它们。 任何建议表示赞赏
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>
最佳答案
我不确定我是否完全理解您想要的结果是什么，但我认为这就是您想要实现的目标:
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>此外，关于您的代码:$(function () { 是不必要的，因此使用如此多的 per-div 样式而不是创建一个类并在样式表中为其提供这些样式也是如此.
关于Javascript。延迟的div创建，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46533573/