jqueryボタンクリック後のカウントダウン効果を実現

7557 ワード

span style="color:rgb(128,0,0);">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"</span><span style="color:rgb(128,0,0);">HTML/js/jquery-1.4.1.min.js</span><span style="color:rgb(128,0,0);">"</span> type=<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">text/javascript</span><span style="color:rgb(128,0,0);">"</span>>
"</span><span style="color:rgb(128,0,0);">text/javascript</span><span style="color:rgb(128,0,0);">"</span>>

<span style="color:rgb(0,0,255);">var</span> InterValObj; <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">timer  ,    </span>
<span style="color:rgb(0,0,255);">var</span> count = <span style="color:rgb(128,0,128);">5</span>; <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">    ,1   </span>
<span style="color:rgb(0,0,255);">var</span> curCount;<span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">      </span>

function sendMessage() {
   curCount = count;
  <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">  button  ,    </span>
     $(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">#btnSendCode</span><span style="color:rgb(128,0,0);">"</span>).attr(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">disabled</span><span style="color:rgb(128,0,0);">"</span>, <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">true</span><span style="color:rgb(128,0,0);">"</span>);
     $(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">#btnSendCode</span><span style="color:rgb(128,0,0);">"</span>).val(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">  </span><span style="color:rgb(128,0,0);">"</span> + curCount + <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">       </span><span style="color:rgb(128,0,0);">"</span>);
     InterValObj = window.setInterval(SetRemainTime, <span style="color:rgb(128,0,128);">1000</span>); <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">     ,1     
    </span><span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">         </span>
     $.ajax({
       type: <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">POST</span><span style="color:rgb(128,0,0);">"</span>, <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);"> POST    </span>
       dataType: <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">text</span><span style="color:rgb(128,0,0);">"</span>, <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">    :JSON</span>
       url: <span style="color:rgb(128,0,0);">'</span><span style="color:rgb(128,0,0);">Login.ashx</span><span style="color:rgb(128,0,0);">'</span>, <span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">    </span>
       data: <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">dealType=</span><span style="color:rgb(128,0,0);">"</span> + dealType +<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">&uid=</span><span style="color:rgb(128,0,0);">"</span> + uid + <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">&code=</span><span style="color:rgb(128,0,0);">"</span> + code,
       error: function (XMLHttpRequest, textStatus, errorThrown) { },
       success: function (msg){ }
     });
}

<span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">timer    </span>
function SetRemainTime() {
            <span style="color:rgb(0,0,255);">if</span> (curCount == <span style="color:rgb(128,0,128);">0</span>) {                
                window.clearInterval(InterValObj);<span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">     </span>
                $(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">#btnSendCode</span><span style="color:rgb(128,0,0);">"</span>).removeAttr(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">disabled</span><span style="color:rgb(128,0,0);">"</span>);<span style="color:rgb(0,128,0);">//</span><span style="color:rgb(0,128,0);">    </span>
                $(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">#btnSendCode</span><span style="color:rgb(128,0,0);">"</span>).val(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">       </span><span style="color:rgb(128,0,0);">"</span>);
            }
            <span style="color:rgb(0,0,255);">else</span> {
                curCount--;
                $(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">#btnSendCode</span><span style="color:rgb(128,0,0);">"</span>).val(<span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">  </span><span style="color:rgb(128,0,0);">"</span> + curCount + <span style="color:rgb(128,0,0);">"</span><span style="color:rgb(128,0,0);">       </span><span style="color:rgb(128,0,0);">"</span>);
            }
        }



        "btnSendCode" type="button" value="     " οnclick="sendMessage()" />