頁面加載后顯示Div 5秒
[英]Show Div 5 Seconds after Page Load
問題描述
我有一行文本包裹在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>
4 個解決方案
解決方案1
1 2015-12-12 21:41:06
在頁面加載時使其不可見：
<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);
});
解決方案2
1 已采納 2015-12-13 16:12:31
抱歉，如果我不清楚我需要什么。 我在這里找到了解決方案。 考慮到許多功能，這可能不是編碼的好習慣，對此我還很陌生，但是它可以滿足我的目的。 我會在這里為其他人發布：
<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>
解決方案3
0 2015-12-12 21:41:18
這是使用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);
});
解決方案4
-2 2015-12-12 21:38:06
使用setTimeout方法在特定時間后執行任何自定義JavaScript代碼。 您可以在其中顯示div。
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
回調將在5秒鍾后進入任務隊列，並且如果完成執行隊列中存在的其他項，則事件循環將在事件循環后執行該回調。
假設您的頁面中有一個ID為SomeDivId的div。
<div id="SomeDivId" style="display:none;">Test</div>
您可以在load事件或DOMContentLoaded事件中連接執行此代碼。 當您的DOM准備就緒並呈現時，將觸發DOMContentLoaded，而在下載所有子資源（例如：images / scripts）后，將觸發加載。
這是如何將其連接到load事件
window.onload = function ()
{
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
};
這是如何在DOMContentLoaded事件上進行連接
document.addEventListener("DOMContentLoaded", function ()
setTimeout(function(){
$("#SomeDivId").show();
}, 5000);
});
這是一個工作示例。
如何在頁面加載時顯示工具提示信息 4 秒然后隱藏，然后在懸停時顯示？
[英]How can I show tooltip info for 4 seconds on page load and then hide, then after show on hover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.