如何在页面加载5秒后用原生JS显示指定div（无需jQuery）

完整代码示例（带渐显动画，模拟jQuery效果） #

<style>
#one {
    display: none;
    /* 用CSS过渡实现渐显，对应jQuery的fadeIn(500) */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#one.show {
    display: block;
    opacity: 1;
}
</style>

<div id="one">
 <h2>Hi there</h2>
</div>

<script>
// 等待DOM加载完成，等价于jQuery的$(document).ready()
document.addEventListener('DOMContentLoaded', function() {
    // 延迟5000毫秒（5秒），等价于jQuery的delay(5000)
    setTimeout(function() {
        const targetDiv = document.getElementById('one');
        // 添加类触发显示和渐显动画
        targetDiv.classList.add('show');
    }, 5000);
});
</script>

简化版（无渐显，直接显示） #

如果不需要动画效果，只需要让元素直接显示，代码可以更简洁：

<style>
#one { display:none;}
</style>

<div id="one">
 <h2>Hi there</h2>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        document.getElementById('one').style.display = 'block';
    }, 5000);
});
</script>

关键对应说明 #

• document.addEventListener('DOMContentLoaded', ...)：替代jQuery的$(document).ready()，确保DOM结构加载完成后再执行代码，避免找不到目标元素。
• setTimeout(..., 5000)：替代jQuery的delay(5000)，设置5秒延迟后执行显示逻辑。
• document.getElementById('one')：替代jQuery的$("#one")，原生JS获取指定ID的元素。
• CSS过渡+类名切换：替代jQuery的fadeIn(500)，实现平滑的渐显动画效果。

内容的提问来源于stack exchange，提问作者Djdj