Javascript анимированного GIF экспедиторской

У меня есть следующий код и получил следующую задачу:Javascript анимированного GIF экспедиторской

я хотел бы иметь анимированный GIF, чтобы показать на загрузку страницы. через 3 секунды я хотел бы отключить gif и показать сообщение, которое хранится в сеансе.

Чтобы понять, что у меня есть следующий счетчик. моя проблема в том, что я не знаю, как позволить gif исчезнуть и включить div div. может кто-то, пожалуйста, помогите мне. Большое спасибо

<body> 

<script type="text/javascript"> 
    var counter = 3;       
    var url ="";  
    function downcount() { 
    document.getElementById('digit').firstChild.nodeValue = counter ; 
    if (counter == 0) { 
     window.location.href=url; 
    } else { 
     counter--; 
     window.setTimeout('downcount()', 1000); 
    } 
    } 
    window.onload=downcount; 
</script> 

<div class="loading"> 
    <img src="loading/loading40.gif" 
</div> 

<div class="msg"> 
<?PHP echo $_SESSION['msg'];?> 
</div>

нормально, теперь я получил этот код, но подмигнули до сих пор не работает:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 

<style> 
.loading { display: block; } 
.msg { display: none; } 
</style> 
</head> 

<body> 

<script type="text/javascript"> 
var counter = 3;       
var url =""; 
var loadingGif = function(){ 
    document.getElementsByClassName('loading').style=display:none; 
    document.getElementsByClassName('msg').style=display:block; 
    } 
    setTimeout('loadingGif()', 3000); 
    window.onload=loadingGif(); 
var loadingGif = function(){ 
    $(".loading").delay(3000).animate({ opacity: 0 }, '100', function(){ 
    $(".msg").css({"display" : "block" }); 
    }); 
    window.onload=loadingGif();} 
function downcount() 
    { 
    document.getElementById('digit').firstChild.nodeValue = counter ; 
    if (counter == 0) 
    { 
    window.location.href=url; 
    }else{ 
    counter--; 
    window.setTimeout('downcount()', 1000); 
    } 
    } 
    window.onload=downcount; 
    window.onload=loadingGif(); 
</script> 

<div class="loading"> 
    <img src="loading/loading40.gif" /> 
</div> 

<div class="msg"> 
    <?php echo $_SESSION['message']; ?> 
</div>

источник

2012-03-07 John

У вас есть элемент с ID цифры где-то? Если да ** и ** у него есть текстовый узел в качестве первого ребенка, тогда ответ [@ JScoobyCed] (http://stackoverflow.com/a/9597914/218196) [будет работать] (http://jsfiddle.net/ JCcaH /). Если вы не знаете, есть ли у '# digit' какие-либо дети, вместо этого используйте' innerHTML': 'document.getElementById ('digit'). InnerHTML = counter;'. –

Вы должны добавить его как переменную.

var loadingGif = function(){ 
    document.getElementsByClassName('loading').style=display:none; 
    document.getElementsByClassName('msg').style=display:block; 
} 
setTimeout('loadingGif()', 3000); //change the opacity of the loading gif to 0 after 3 seconds, and then load the message block.

Я также рекомендовал бы использовать jQuery для расширения возможностей и ужесточения.

var loadingGif = function(){ 
$(".loading").delay(3000).hide('100', function(){ 
    $(".msg").css({"display" : "block" }); 
}); //after 3 seconds animate the div to display:none; in 1/10th of a second 
}

Убедитесь, что .loading установлен для отображения: block и .msg установлен для отображения: none.

источник

2012-03-07 08:15:08 Ohgodwhy

привет, я попытался использовать это, но он не работает. он просто показывает gif. вот код, который я использовал: – John

– John

\t \t <тип скрипта = "текст/JavaScript"> вар счетчик = 3; var url = ""; var loadingGif = function() { document.getElementsByClassName ('loading'). Style = display: none; document.getElementsByClassName ('msg'). Style = display: block; } } setTimeout ('loadingGif()', 3000); var loadingGif = function() { $ (". Loading"). Delay (3000) .animate ({opacity: 0}, '100', function() { $ (". Msg"). Css ({"display": "block"}); }); // через 3 секунды оживить div до 0 непрозрачности в 1/10 секунды } – John

Например, сначала установите

.visible { display: block; } 
.hidden { display: none; } 


<div id="loading" class="visible"> 
    <img src="loading/loading40.gif" /> 
</div> 

<div id="message" class="hidden"> 
    <?php echo $_SESSION['message']; ?> 
</div>

затем изменить CSS с помощью JavaScript в вашей учетной записи

function downcount(){ 
    document.getElementById('loading').className = 'hidden'; 
    document.getElementById('message').className = 'visible'; 
}

источник

2012-03-07 08:14:26 scibuff

Вы можете использовать дисплей CSS: нет/блок

<body> 

<script type="text/javascript"> 
var counter = 3;       
var url ="";  
function downcount() { 
    document.getElementById('digit').firstChild.nodeValue = counter ; 
    if (counter == 0) { 
    document.getElementById('loading').style.display = 'none'; 
    document.getElementById('msg').style.display = 'block'; 
    } else { 
    counter--; 
    window.setTimeout('downcount()', 1000); 
    } 
} 
window.onload=downcount; 
</script> 

<div id="loading"> 
    <img src="loading/loading40.gif" 
</div> 

<div id="msg" style="display:none"> 
    <?PHP echo $_SESSION['msg'];?> 
</div> 

</body>

источник

2012-03-07 08:17:44 JScoobyCed

Javascript анимированного GIF экспедиторской

ответ

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