本文實(shí)例總結(jié)了jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果。分享給大家供大家參考，具體如下：
<!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實(shí)現(xiàn)倒計(jì)時(shí)效果</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()); //這里我是在服務(wù)端算好了剩余的秒數(shù)，并保存到客戶端，如果過(guò)期則返回0 InterValObj = window.setInterval(SetRemainTime, 1000); //間隔函數(shù)，1秒執(zhí)行 }); //代理,接單的時(shí)間+1小時(shí)減去當(dāng)前時(shí)間的秒數(shù) function SetRemainTime() { if (SysSecond > 0) { //alert(SysSecond); SysSecond = SysSecond - 1; var second = Math.floor(SysSecond % 60); // 計(jì)算秒 var minite = Math.floor((SysSecond / 60) % 60); //計(jì)算分 var hour = Math.floor((SysSecond / 3600) % 24); //計(jì)算小時(shí) var day = Math.floor((SysSecond / 3600) / 24); //計(jì)算天 $("#remainTime").html(day + "天" + hour + "小時(shí)" + minite + "分" + second + "秒"); } else {//剩余時(shí)間小于或等于0的時(shí)候，就停止間隔函數(shù) 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>當(dāng)我們?cè)趙ebservice里讀取到數(shù)據(jù)庫(kù)中的時(shí)間字段后，把時(shí)間分割判斷。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);}//當(dāng)窗體加載是調(diào)用。相當(dāng)于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>多個(gè)倒計(jì)時(shí)>>>
代碼:
<!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>無(wú)標(biāo)題頁(yè)</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>更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
