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 を持つ 2 つのアイテムがあります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 に答える