Question

我有一行文本包裹在div中，我想先隐藏，然后在页面加载后5秒钟后显示。我还有其他一些功能，我不想让它干扰这里。

<script type="text/javascript">
function sleep() {
    setTimeout("countdown()", 5000);
}
var ss = 6;
function countdown() {
ss = ss-1;
if (ss<0) {
window.location="http://www.mywebsite.com/";
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}
</script>

<body onload="sleep()">Your transaction was successful.

<div id="div1"><p><em>You will be redirected to the homepage in <span id="countdown">5</span> second(s).</em></p></div>

Answer 1

在页面加载时使其不可见：

<div id="div1" style="display:none"><p><em>You will be redirected to the homepage in <span id="countdown">5</span> second(s).</em></p></div>

然后在页面加载后5秒后显示：

$(function(){
   setTimeout(function(){
     $('#div1').show();
   },5000);
});

Answer 2

很抱歉，如果我不清楚我需要什么。我在这里找到了解决方案。考虑到许多功能，编码可能不是一个好习惯，我对此很新，但它适用于我的目的。我会在这里张贴给其他人：

<body onload="sleep()">
    <p align="center">Your transaction was successful. Thank you for your donation to...</p>
    <div align="center" id="redirect" style="visibility: hidden">
       <h4>You will be redirected to the homepage in <span id="countdown">5</span> second(s)...</h4>
    </div>

    <script type="text/javascript">
        function showRedirect() {
            document.getElementById("redirect").style.visibility = "visible";
        }
        setTimeout("showRedirect()", 2500); 
        function sleep() {
            setTimeout("countdown()", 2000);
        }
        var ss = 6;
        function countdown() {
            ss = ss-1;
            if (ss<0) {
                window.location="http://www.mywebsite.com/";
            }
            else {
                document.getElementById("countdown").innerHTML=ss;
                window.setTimeout("countdown()", 1000);
            }
        }
    </script>

Answer 3

以下是使用vanilla JS的方法。这等待DOM完全加载，然后在重定向之前倒计时5秒。

document.addEventListener('DOMContentLoaded', function() {
  var seconds = 5;
  var countdownEl = document.querySelector('#countdown'); 

  setInterval(function() {
    if (seconds === 0) {
      window.location = "http://www.mywebsite.com/";
      return;
    }
    countdownEl.innerHTML = --seconds;
  }, 1000);

});

http://jsbin.com/cuhepojuma/edit?html,js,output

有一个有效的例子

Answer 4

使用setTimeout方法在特定时间后执行任何自定义JavaScript代码。你可以在里面展示你的div。

setTimeout(function(){ 
      $("#SomeDivId").show();
}, 5000);

回调将在5秒后排队到任务队列，如果完成执行队列中的其他项目，事件循环将执行它。

假设您的网页中有一个ID为SomeDivId的div。

<div id="SomeDivId" style="display:none;">Test</div>

您可以在load事件或DOMContentLoaded事件中连接执行此代码。当DOM准备好并呈现时，将触发DOMContentLoaded，而在下载所有子资源（例如图像/脚本）之后将触发加载。

以下是如何将其连接到load事件

window.onload = function ()
{
    setTimeout(function(){ 
      $("#SomeDivId").show();
    }, 5000);
};

以下是如何在DOMContentLoaded事件

上连接它

document.addEventListener("DOMContentLoaded", function ()
    setTimeout(function(){ 
      $("#SomeDivId").show();
    }, 5000);
});

Here是一个工作样本。

在页面加载后显示Div 5秒

4 个答案: