作者 主題: 如何使用javascript在html頁面中實現進程執行中,請等待的功能 ?  (閱讀 2933 次)

0 會員 與 1 訪客 正在閱讀本文。

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料

請問各位大大,
要如何在按鈕按下後就會出現兩個loading等待執行的圖案




代碼: [選擇]
<html>
   <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Testing</title>
     <script type="text/javascript" >
    function loadAjax(aaa,bbb,ccc){
         if(window.XMLHttpRequest){
         xmlhttp=new XMLHttpRequest();
      }else{
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById(ccc).innerHTML=xmlhttp.responseText;
         }
      }

      xmlhttp.open(aaa,bbb,true);
      xmlhttp.send();

   }
   
   
   function showString(str) {document.getElementById('StringLoading').innerHTML = str;} //回傳值會將等待圖案取代
function showValue(str) {
document.getElementById('ValueLoading').innerHTML = str;
document.getElementById("Test").disabled=false;
}
//回傳值會將等待圖案取代
</script>
   </head>
   
   <body>
   
  <table width="500" border="1">
   <applet id="myapplet" code="myapplet.class" name="myapplet" width="0" height="0" >
      <PARAM NAME=value VALUE="<?php echo $_SESSION[&#39;value&#39;] ;?>">
  </applet>
  <tr>
    <td>Show String :</td>
    <td><div id="StringLoading" style="float:left;">
<img src="images/Loading.jpg" style="vertical-align:middle;padding:6px"/>  //執行等待圖案...
 </div></td>
  </tr>
  <tr>
    <td>Show Value :</td>
    <td><div id="ValueLoading" style="float:left;">
     <img src="images/Loading.jpg" style="vertical-align:middle;padding:6px"/></div></td>  //執行等待圖案..
  </tr>
  <tr>
    <td> <input type="button" value="Test"  name="submit" onclick=javascript:loadAjax("GET","updateDB.php","Server");loadAjax("GET","re-updateDB.php","complete")></td>
    <td>&nbsp;</td>
  </tr>
</table>

   </body>
   </html>