0

以下是我的代码，我已经可以使用动画 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>
4

2 回答 2

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>
于 2013-02-25T17:48:32.570 回答
0

首先，您有两个具有相同 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";
}
于 2013-02-25T17:49:39.410 回答