Показать Div 5 секунд после загрузки страницы

У меня есть строка текста, завернутая в 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>

источник

2015-12-12 Christopher

Опубликованный код, кажется, работает нормально, в чем проблема? – adeneo

Извините, если я не ясно, с чем я нуждался. Я нашел решение здесь. Это не может быть хорошей практикой для кодирования с учетом многих функций, я довольно новичок в этом, но он работает для моих целей. Я отправлю его здесь для других:

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

источник

2015-12-13 16:12:31 Christopher

-1

Используйте setTimeout метод для выполнения любого пользовательского JavaScript по истечении определенного времени. Вы можете показать свой div внутри этого.

$(function(){ 

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

});

Предполагая, что у вас есть DIV с идентификатором SomeDivId в вашей странице.

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

Here является рабочим образцом.

источник

2015-12-12 21:38:06 Shyju

сделать его невидимым при загрузке страницы:

<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 secods после страницы загружаются:

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

источник

2015-12-12 21:41:06

Не могли бы вы рассказать мне, как включить код функции в мой, который я опубликовал? Я пробовал, но, похоже, все это сломает. Я новичок в этом. – Christopher

какой текст вы хотите узнать через 5 секунд после загрузки страницы? –

Вот как это сделать с ванильным 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

источник

2015-12-12 21:41:18

Показать Div 5 секунд после загрузки страницы

ответ

Смежные вопросы