Question

标题几乎说明了一切：我需要帮助制作一个只在页面加载后5秒出现的按钮。

这是我正在使用的代码：

                <html>
                <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>
                        <font size=5 face=helvetica>
                        You have entered the wrong username/password too many times <br>
                        <br><br>
                        <br><br>
                        Click "OK" to go back to the log-in page <br> <br>
                        <p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>

                        <script>
                        document.getElementById("Button").style.visibility = "hidden";

                        function showStuff(Button){
                        document.getElementById("Button").style.display = "inline";}

                        function myFunction() {
                            window.location = "project.html"}


                        </script>
            </div> </font>
                </body>
            </html>

Answer 1

这可能就是你所需要的

<body>


    <button id="some-button">button</button>
    <script>
        document.getElementById("some-button").style.display = "none";

        function showStuff() {
            document.getElementById("some-button").style.display = "inline";
        }

        function myFunction() {
            window.location = "project.html"
        }

        setTimeout(showStuff, 5000);
    </script>
</body>

</html>

Answer 2

Instruction

函数定义应该在函数调用之前 在函数showstuff中，不需要参数。在settimeout中使用function（）来正确执行。如果没有，它会毫不拖延地执行。

Answer 3

你应该知道的事情
* html元素<font> is deprecated
*混合Javascript代码inline with html是不好的做法 *不要复制html元素ID，they should be unique（感谢Calvin Nunes）

如何修复代码
*正确关闭第二个<font>元素并删除按钮的不必要ID *如果您使用display = 'inline'，则隐藏元素使用display = 'none'

工作代码

            <html>
            <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>
                    <font size=5 face=helvetica>
                    You have entered the wrong username/password too many times <br>
                    <br><br>
                    <br><br>
                    Click "OK" to go back to the log-in page <br> <br> 
                    </font>
                    <p id="Button">
                       <input type=submit onclick="myFunction()" value="OK"> </p>


              <script>

                    document.getElementById("Button").style.display= "none";

                    function showStuff(){
                        document.getElementById("Button").style.display = "inline";
                    }

                    function myFunction() {
                        window.location = "project.html"
                    }


                    </script>
            </body>
        </html>

Answer 4

使用jquery你可以在div中使用按钮，例如 <div id="div_id">Button here</div>并设置超时显示

setTimeout(function(){
   $('#div_id').show();// or fade, css display however you'd like.
}, 5000);`

或使用Javascript：

function showItbutton() {
  document.getElementById("div_id").style.visibility = "visible";
}
setTimeout("showItbutton()", 5000); // after 5 secs

Answer 5

首先，使用DOMContentLoaded事件，然后在该处理程序中编写代码来处理这个逻辑：

<script>
    window.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            // Assuming button has id 'myButton'.
            document.querySelector('#myButton').style.display = 'none';
        }, 5000);
    });
</script>

记住DOMContentLoaded是检测页面加载的关键。您可以根据自己的情况使用onload。 Refer this to understand the difference between the two

Answer 6

setTimeout()收到毫秒，而不是秒。所以它5000对你有用。

JS：

setTimeout(showStuff, 5000);
console.debug('Start page');
function showStuff(Button){
    console.debug('Display');
    document.getElementById("Button").style.display = "inline";
}

HTML：

<button id="Button" style="display:none">Button</button>

如何制作一个仅在5秒后使用Javascript出现的按钮？

6 个答案: