使div在加载页面后5秒出现，不使用jquery

Question

我试图使文本div出现加载页面后5秒，我的问题是，我想使用基本的js，没有jquery。我设法用jquery找到答案，并试图将它们更改为js，但我不能，因为我是初学者:(

<style>
#one { display:none;}
</style>
<div id="one">
<h2>Hi there</h2>
</div>

**这是jquery我找到的**

$(document).ready(function() {
$(".contentPost").delay(2000).fadeIn(500);
});

Answer 1

<style>
#one { display:none;}
</style>
<div id="one">
<h2>Hi there</h2>
</div>
<script>
setTimeout(function() {
document.getElementById('one').style.display = 'block';
}, 5000); // 5 seconds
</script>

我们使用setTimeout函数来指定我们想要在经过一定时间后执行某个函数。

Answer 2

window.addEventListener("DOMContentLoaded", () => {})相当于$(document).ready...

您可以使用setTimeOut()代替delay()。关于setTimeOut

一起:

window.addEventListener("DOMContentLoaded", () => {
setTimeOut(() => {
let post = document.querySelector(".contentPost");
post.style.display = "block";
post.animate([
{opacity: 0},
{opacity: 1}
], 500)
}, 2000)
})