Question

我想要的是使用setInterval（）函数将所有带有“ goccia”类的div从顶部移到底部。

我不明白为什么它只移动第一个元素（.goccia）

这是我的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);

Answer 1

我想您正在尝试将创建的每个div向下发送到底部。

您应该使用css属性“ position：absolute”和“ top：0px”并将其应用于campo（div的容器）或创建一个新容器。这样会更容易。

我建议您检查this W3Schools article并尝试每个参数来了解它。

继续编码！

如何将div类从顶部移到底部？

1 个答案: