本文實例總結了jQuery實現的倒計時效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery實現倒計時效果</title><script language="javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript"> var SysSecond; var InterValObj; $(document).ready(function() { SysSecond = parseInt($("#remainSeconds").html()); //這里我是在服務端算好了剩余的秒數，并保存到客戶端，如果過期則返回0 InterValObj = window.setInterval(SetRemainTime, 1000); //間隔函數，1秒執行 }); //代理,接單的時間+1小時減去當前時間的秒數 function SetRemainTime() { if (SysSecond > 0) { //alert(SysSecond); SysSecond = SysSecond - 1; var second = Math.floor(SysSecond % 60); // 計算秒 var minite = Math.floor((SysSecond / 60) % 60); //計算分 var hour = Math.floor((SysSecond / 3600) % 24); //計算小時 var day = Math.floor((SysSecond / 3600) / 24); //計算天 $("#remainTime").html(day + "天" + hour + "小時" + minite + "分" + second + "秒"); } else {//剩余時間小于或等于0的時候，就停止間隔函數 window.clearInterval(InterValObj); } }</script></head><body><div id="remainSeconds" style="display:none">18000</div><div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div></body></html>當我們在webservice里讀取到數據庫中的時間字段后，把時間分割判斷。Javascript代碼如下：
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function Times() {var tempTime=document.getElementById("currTime").innerHTML.split(":");var hour=tempTime[0];var minute=tempTime[1];var second=tempTime[2];if(second>=1){second=(second-1>9)?(second-1):"0"+(second-1);}else{ second="59"; if(minute>=1){ minute=(minute-1>9)?(minute-1):"0"+(minute-1); }else{ minute="59"; if(hour>=1){ hour=(hour-1>9)?(hour-1):"0"+(hour-1); }else{ minute="00"; hour="0"+0; } }}document.getElementById("currTime").innerHTML=hour+":"+minute+":"+second;if(hour==0&&minute==0&&second==0){document .getElementById ("currTime").style .display ="none";}elsesetTimeout (Times,1000);}//當窗體加載是調用。相當于onload（）事件 (function gettime() { $.ajax({ contentType:"application/json", type: "POST", url: "WebService.asmx/Gettime", data: "{'id':'1'}", dataType: 'json', success: function(msq){ document .getElementById ("currTime").innerHTML =msq.d ; } }); setTimeout (Times,1000) ； })(); </script>多個倒計時>>>
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>無標題頁</title></head><body> <p>離一模還有<span id="_lefttime1" style="color:red;font-size:12pt;"></span></p><p>離二模還有<span id="_lefttime2" style="color:red;font-size:12pt;"></span></p><p>離高考還有<span id="_lefttime3" style="color:red;font-size:12pt;"></span></p></body></html><SCRIPT LANGUAGE="JavaScript">function _fresh(){var datalist =new Array();datalist =[[new Date("2010/10/1"), "_lefttime1"],[new Date("2010/10/15"), "_lefttime2"],[new Date("2010/10/2"), "_lefttime3"]];for(var i =0; i<datalist.length; i++){var endtime =datalist[i][0];var nowtime = new Date();var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);if(leftsecond<0)leftsecond=0;var __d=parseInt(leftsecond/3600/24);document.getElementById(datalist[i][1]).innerHTML=__d+"天 ";}}setInterval(_fresh,1000);</SCRIPT>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
