实时显示倒计时状态demo（附详细的注释）

2024-11-22 技术教程 151

本程序包含多个文件来讲解，当然你也可以根据实际情况进行合并。

index.html(非必须):首页显示，时间设定，测试的时候可以直接在文件里指定时间。

gettime.php(主要文件1):实时倒计时状态显示

gettime2.php(主要文件2):gettime每1秒请求一次的文件，返回此刻请求得到的数据

源码如下：

/**index.html**/<formaction="gettime.php"method="post">请输入活动开始时间：<inputid="hour"type="text"name="hour"size="2"/>点<inputid="min"type="text"name="min"size="2"/>分<inputid="sec"type="text"name="sec"size="2"/>秒<inputtype="submit"value="设定"/></form><scripttype="text/javascript">window.onload=function(){varhour=document.getElementById('hour');hour.onblur=function(){if(hour.value>23||hour.value<0){alert('时间超出范围');returnfalse;}}varmin=document.getElementById('min');min.onblur=function(){if(min.value>59||min.value<0){alert('时间超出范围');returnfalse;}}varsec=document.getElementById('sec');sec.onblur=function(){if(sec.value>59||sec.value<0){alert('时间超出范围');returnfalse;}}}</script>/**gettime.php**/<?phpecho"设定的时间是：".$hour.":".$min.":".$sec."，活动还未开始，倒计时状态中<br/>";}?>/**ajax请求到的数据会存放在id='hh'的这个DIV里，你也可以将返回的数据放在任何你想放的位置，只需要将它的id设置为与js里id相同即可。注意这个脚本需要jQuery的支持(下载jq见文章结尾)，所以请将jq文件引用到位。**/<divid="hh"></div><scripttype="text/javascript"src="jquery-2.1.1.min.js"></script><scripttype="text/javascript">functiongett(){$(function(){//接收index传过来的时间参数，并用ajax传递给gettime2.php进行判断//测试的时候可以不需要index，直接在这里指定时间varh='<?phpecho$hour;?>';varm='<?phpecho$min;?>';vars='<?phpecho$sec;?>';$.ajax({url:'gettime2.php?h='+h+'&m='+m+'&s='+s,type:"POST",data:{action:"guesslike"},dataType:"html",timeout:3000,cache:false,success:function(re){$('#hh').html(re);}})});setTimeout("gett()",1000)}gett();</script>/*gettime2.php核心文件*/<?phpdate_default_timezone_set("PRC");//接收时间$seth=$_REQUEST['h'];$seti=$_REQUEST['m'];$sets=$_REQUEST['s'];$time=time();//echo'<br/>当前时间是：'.date("H:i:s",$time);//判断小时剩余>1if($seth>date('H',$time)){$h=$seth-date('H',$time);//判断分钟剩余>1if($seti>date('i',$time)){$i=$seti-date('i',$time);//判断秒剩余>1if($sets>date('s',$time)){$s=$sets-date('s',$time);}else{$s=$sets-date('s',$time)+59;$i=$i-1;}}else{//分钟剩余0$i=$seti-date('i',$time)+59;$h=($h-1)>0?($h-1):0;//如果小时被借去1后等于0，则不用显示小时了if($sets>date('s',$time)){$s=$sets-date('s',$time);}else{$s=$sets-date('s',$time)+59;}}if($h!=0){echo"<br/>剩余时间还有:".$h."小时".$i."分".$s."秒";}else{echo"<br/>剩余时间还有:".$i."分".$s."秒";}}else{//判断小时剩余=0$h=0;if($seti>date('i',$time)){$i=$seti-date('i',$time);//判断秒剩余>1if($sets>date('s',$time)){$s=$sets-date('s',$time);}else{$s=$sets-date('s',$time)+59;$i=$i-1;}echo"<br/>剩余时间还有：".$i."分".$s."秒";}else{//分钟剩余0if($sets<=date('s',$time)){echo"活动已经开始了";}else{//$i=0;//分钟为0，可以显示，也可以不显示，本程序不显示$s=$sets-date('s',$time);}if($s>=0){echo"<br/>剩余时间还有：".$s."秒";}elsereturnfalse;}}?>##########################END################################

以上3段源码，复制过去，文件名对应，打开index就可以看到效果。

官方源jQuery2.1.1点此下载，各位也可以自行百度下载或者官方网站去下载。