Javascript动画gif转发

我有以下代码，并得到以下问题：

我想在加载页面时显示一个动画gif。3秒钟后，我想禁用gif并显示存储在会话中的消息。

意识到我有以下计数器。我的问题是，我不知道如何让gif消失并引入msgdiv。有人能帮我吗。感谢

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

您应该将其作为变量添加。

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设置为display:block，.msg设置为dispay:none。

例如，最初设置

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

然后通过下计数函数中的javascript更改css

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

您可以使用CSS显示：none/block

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

相关内容

最新更新

热门标签：