Javascript 如何按顺序显示div？

我正在为自己创建一个网站，并希望在页面加载后，按顺序显示带有文本的div（出现之间的间隔会很长）。我不需要任何特别的动画

我试图在堆栈溢出或其他任何地方找到一些东西，但找不到。它应该是messenger的某种“副本”

以下是我得到的：

嘿

你听说了吗

嗯？关于什么

关于这个新网站

这不需要jQuery。下面是使用纯JavaScript的方法：

function addMessage() {
    var container = document.getElementById("message-area");
    var messageElem = document.createElement("div");
    messageElem.setAttribute("class", "message-area__message");
    messageElem.appendChild(document.createTextNode("my message"));
    container.appendChild(messageElem);
}

window.addEventListener('load', function() {
    console.log('loaded')
    for (var i=0; i<5; i++) {
      window.setTimeout(addMessage, 500*i);
    }
});

HTML:

JavaScript:

function addMessage() {
    var container = document.getElementById("message-area");
    var messageElem = document.createElement("div");
    messageElem.setAttribute("class", "message-area__message");
    messageElem.appendChild(document.createTextNode("my message"));
    container.appendChild(messageElem);
}

window.addEventListener('load', function() {
    console.log('loaded')
    for (var i=0; i<5; i++) {
      window.setTimeout(addMessage, 500*i);
    }
});

函数addMessage（）{
var container=document.getElementById（“消息区域”）；
var messageElem=document.createElement（“div”）；
messageElem.setAttribute（“类”、“消息区域消息”）；
messageElem.appendChild（document.createTextNode（“我的消息”）；
container.appendChild（messageElem）；
}
addEventListener（'load'，function（））{
console.log（'loaded'）
对于（var i=0；i您可以首先使用CSS隐藏它们（例如，在
.message
类中使用
display:none
），然后使用
.delay（）.promise（）
返回的承诺以延迟方式显示它们，并使用
reduce
链接这些承诺：


$（“.message”）.get（）.reduce（函数（acc，div）{
返回acc.then（函数（）{
返回$（div.show（）.delay（400.promise（））；
});
}，$.when（））；//以已解析的承诺开头
.message{display:none}；

嘿

你听说了吗

嗯？关于什么

关于这个新网站

查找css动画