Question

我有以下代码并遇到以下问题：

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

意识到我有以下的柜台。我的问题是我不知道如何让gif消失并引入msg 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>

Answer 1

例如，最初设置

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

然后在你的downcount函数中通过javascript更改css

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

Answer 2

您应该将其添加为变量。

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设置为display：none。

Answer 3

您可以使用CSS display：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>

Javascript动画gif转发

3 个答案: