[英]How can I move a class of div from top to bottom?
What I want is to move all the div's with class "goccia" move from top to bottom together using the setInterval() function.我想要的是使用 setInterval() 函数将所有带有“goccia”类的 div 从上到下移动。
I can't understand why it is moving only the first element (.goccia)我不明白为什么它只移动第一个元素 (.goccia)
Here is my JavaScript code.这是我的 JavaScript 代码。
var campo = document.querySelector('#campo');
var marginTop = 0;
function creaGocce(){
var numeroGocce = document.querySelector('input').value;
for (var i = 0; i < numeroGocce; i++) {
campo.innerHTML += ' <div class = "divGoccia"> <div class = "goccia">
</div> </div>';
}
}
function scompari(){
document.querySelector('.contenitore').style.display = 'none';
}
function spostaGocce(){
var goccia = document.querySelector('.goccia');
goccia.style.marginTop = marginTop + "px";
marginTop += 10;
}
function muoviti(){
scompari();
creaGocce();
setInterval(spostaGocce, 1000);
}
document.querySelector('button').addEventListener('click', muoviti);
I suppose you are trying to send down each of your created divs to the bottom.我想您正试图将您创建的每个 div 发送到底部。
You should use the css attribute "position: absolute" and "top: 0px" and apply it to campo (the container of the divs) or create a new container.您应该使用 css 属性“position: absolute”和“top: 0px”并将其应用到 campo(div 的容器)或创建一个新容器。 It will be easier.
会更容易。
I would recommend you to check this W3Schools article and try each parameter to know it.我建议您查看这篇 W3Schools 文章并尝试了解每个参数。
Keep coding!继续编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.