页面加载后显示Div 5秒

我有一行文本包装在一个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>

如果我不清楚我需要什么，很抱歉。我在这里找到了解决方案。考虑到有很多函数，这可能不是一个很好的编码实践，我对此很陌生，但它对我的目的很有用。我会在这里为其他人发布：

<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>

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

<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);
});

下面介绍如何使用vanillaJS。这将等待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，输出

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

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

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

假设您的页面中有一个id为SomeDivId的div。

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

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

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

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

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

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

这是一个工作样品。

相关内容

最新更新

热门标签：