比如要做一个限时购物的功能,这就要做到倒计时,要有实时的倒计时。
要求要有小时分钟秒的实时倒计时的显示,用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准)。
其实这和很多的考试等系统的时间限制功能同样的要求。
总不能用ajax每秒都获取服务器时间吧,所以实时倒计时一定要用javascript实现。这很简单,网上一大把的例子。
现在问题是解决用户端修改日期时间对我们的显示的影响。
解决的办法是计算出用户端的时间和服务器的时间差,这样问题的完成解决了。
这样只需要运行一次php,实时倒计时的时间就和服务器的时间同步了。
理论是同步的,但实际测试会有1秒的误差。(具体原因就是和网速有关,网速越快,误差就越小),但这决不会影响到我们上面的要求了。
程序演示:
6:20:6
注:秒杀时间从早上点到晚上10点。
Code 如下:
05 | date_default_timezone_set( 'PRC' ); |
09 | $starttimestr = "08:00:00" ; |
10 | $endtimestr = "22:00:00" ; |
12 | $starttime = strtotime ( $starttimestr ); |
13 | $endtime = strtotime ( $endtimestr ); |
15 | if ( $nowtime < $starttime ){ |
16 | die ( "活动还没开始,活动时间是:{$starttimestr}至{$endtimestr}" ); |
18 | $lefttime = $endtime - $nowtime ; |
21 | <script language= "JavaScript" > |
25 | var nMS = <?= $lefttime ?>*1000-runtimes*1000; |
26 | var nH=Math. floor (nMS/(1000*60*60))%24; |
27 | var nM=Math. floor (nMS/(1000*60)) % 60; |
28 | var nS=Math. floor (nMS/1000) % 60; |
29 | document.getElementById( "RemainH" ).innerHTML=nH; |
30 | document.getElementById( "RemainM" ).innerHTML=nM; |
31 | document.getElementById( "RemainS" ).innerHTML=nS; |
32 | if (nMS>5*59*1000&&nMS<=5*60*1000) |
37 | setTimeout( "GetRTime()" ,1000); |
39 | window.onload=GetRTime; |
43 | <h4><strong id= "RemainH" >XX</strong>:<strong id= "RemainM" >XX</strong>:<strong id= "RemainS" >XX</strong></h4> |