Question

以下是我的代码，我已经有动画GIF工作，但我需要在GIF被禁用5秒后显示一条消息或其他图片。提前致谢

的JavaScript

<script type= "text/javascript">
function show() {
  document.getElementById("processing").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
  document.getElementById("processing").style.display="none";
}
</script>

HTML

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
 <div id="processing" style="display:none;"><img src="images/processing.gif" id= "processing" alt="Processing transaction!" /></div>

Answer 1

http://jsfiddle.net/V4UU2/4

<style>
#processing, #message {
    display: none;
}
</style>

<p>
    <input type="button" id="submit" value="Make Transfer" class="submit_button" onclick="show()" />
</p>

<div>
    <img src="http://placehold.it/150x150" id="processing" alt="Processing transaction!"
    />
    <div id="message">My message.</div>
</div>

<script>
  function hide() {
    document.getElementById("processing").style.display = "none";
    document.getElementById("message").style.display = "block";
    }

</script>

Answer 2

首先，您有两个具有相同ID processing的项目。更改图像中的ID，并添加一个带有消息的div

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
<div id="processing" style="display:none;">
  <img src="images/processing.gif" id="processing-img" alt="Processing transaction!" />
  <div id="processed-msg" style="display:none">Finished processing </div>
</div>



function hide() {
  document.getElementById("processing-img").style.display="none";
  document.getElementById("processing-msg").style.display="block";
}

显示动画GIF后显示消息

2 个答案: