Heim > Artikel > Web-Frontend > Zusammenfassung der von jQuery_jquery implementierten Countdown-Effektbeispiele
Das Beispiel in diesem Artikel fasst den von jQuery implementierten Countdown-Effekt zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
<!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>
Nachdem wir das Zeitfeld in der Datenbank im Webservice gelesen haben, teilen wir die Zeit in Beurteilungen auf. Der Javascript-Code lautet wie folgt:
<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); } //当窗体加载是调用。相当于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>
Mehrere Countdowns>>>
Code:
<!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>
Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der JQuery-Fähigkeiten für Datums- und Uhrzeitoperationen“, „Zusammenfassung der jQuery-Umschaltspezialeffekte und -Fähigkeiten ", "Zusammenfassung der JQuery Drag & Drop-Spezialeffekte und -Fähigkeiten", "Zusammenfassung der jQuery Extension-Fähigkeiten", "Zusammenfassung der jQuery Common Classic-Spezialeffekte" , „jQuery-Animation und Zusammenfassung der Verwendung von Spezialeffekten “, „Zusammenfassung der Verwendung des jQuery-Selektors “ und „allgemeine jQuery-Plug-ins und Zusammenfassung der Verwendung “
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.