jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例小結(jié)
本文實(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ù),并保存到客戶端,如果過期則返回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"; } else setTimeout (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常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- jQuery簡(jiǎn)單倒計(jì)時(shí)效果完整示例
- 基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無(wú)視頁(yè)面關(guān)閉)
- jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
- jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法詳解
- 基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果
- jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼
- jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼
相關(guān)文章
web開發(fā)人員學(xué)習(xí)jQuery的6大理由及jQuery的優(yōu)勢(shì)介紹
jQuery是一個(gè)用來(lái)簡(jiǎn)化HTML客戶端開發(fā)的JS(JavaScrip)庫(kù),它支持HTML DOM處理,同時(shí)還融合了部分HTML和CSS2013-01-01artDialog雙擊會(huì)關(guān)閉對(duì)話框的修改過程分享
artDialog,一個(gè)jquery的對(duì)話框插件但是在使用時(shí)發(fā)現(xiàn)鼠標(biāo)雙擊時(shí)會(huì)自半對(duì)話框,下面與大家分享下具體的修改過程,感興趣的朋友可以參考下2013-08-08關(guān)注jquery技巧提高jquery技能(前端開發(fā)必學(xué))
本文給大家介紹jquery前端開發(fā)關(guān)注jquery技巧提高jquery技能,對(duì)jquery前端開發(fā)感興趣的朋友可以參考下本文2015-11-11jquery修改網(wǎng)頁(yè)背景顏色通過css方法實(shí)現(xiàn)
在瀏覽一些網(wǎng)站,尤其是一些小說(shuō)網(wǎng)站的時(shí)候,都會(huì)有修改頁(yè)面背景顏色的地方,這個(gè)是用jquery可以做到2014-06-06jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的方法
這篇文章主要介紹了JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12