如何用JavaScript实现页面加载5秒后才显示的按钮？

没问题，我来帮你搞定这个需求！结合你现有的代码，我整理了直接可用的实现方案，核心思路就是初始隐藏按钮，页面加载完成后启动5秒定时器，时间到了再让按钮显示出来。

完整代码示例 #

<html>
<head>
    <!-- 可选：用CSS类控制隐藏，比内联样式更易维护 -->
    <style>
        .hidden {
            display: none;
        }
        .login button {
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body onload="setTimeout(showStuff, 5000)">
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class=login align=center>
        <font size=13 face=helvetica> You're doing that too much. </font><br><br><br>
        <!-- 初始添加hidden类隐藏按钮 -->
        <button id="retryButton" class="hidden">点击重试</button>
    </div>

    <script>
        function showStuff() {
            // 获取按钮元素，移除hidden类让它显示
            const retryBtn = document.getElementById('retryButton');
            retryBtn.classList.remove('hidden');
            
            // 如果想用内联样式的方式，也可以这么写：
            // retryBtn.style.display = 'inline-block';
        }
    </script>
</body>
</html>

关键要点说明 #

• 初始隐藏按钮：我用了CSS类.hidden来控制隐藏，比直接写内联样式更方便后续修改样式规则；如果习惯内联样式，直接加style="display:none"也完全可行。
• 定时器逻辑：你原代码里的body onload="setTimeout(showStuff, 5000)"已经很准确了——页面加载完成后，触发5000毫秒（5秒）的定时器，到时执行showStuff函数。
• 显示按钮：在showStuff函数里，通过按钮的id获取元素，然后移除隐藏类（或修改display属性），就能让按钮显示出来。

如果你的按钮是链接（<a>标签）或者其他元素，逻辑完全一样，只需要把选择器对应改成你的元素id就行~

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