在页面加载后显示Div 5秒
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在页面加载后显示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>
答案
在页面加载时使其不可见：
<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);
});
另一答案
对不起，如果我不清楚我需要什么。我在这里找到了解决方案。考虑到许多功能，编码可能不是一个好习惯，我对此很新，但它适用于我的目的。我会在这里发布给其他人：
<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>
另一答案
以下是使用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有一个有效的例子
另一答案
使用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秒的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 在每个 cookie 5 秒后隐藏 div 加载