本文執行個體講述了php即時倒計時功能實現方法。分享給大家供大家參考，具體如下：
這幾天公司要做一個限時購物的功能.這就要做到倒計時,要有即時的倒計時.
要求:
1) 要有小時分鐘秒的即時倒計時的顯示
2)使用者端修改日期時間不會影響到倒計時的正常顯示(也就是以伺服器時間為準)
其實這和很多的考試等系統的時間限制功能同樣的要求.
解決思路:
1)總不能用ajax每秒都擷取伺服器時間吧.
所以即時倒計時一定要用javascript實現.這很簡單.網上一大把的例子.
2)現在問題是解決使用者端修改日期時間對我們的顯示的影響.
解決的辦法是計算出使用者端的時間和伺服器的時間差.這樣問題的完成解決了.
這樣只需要運行一次php.即時倒計時的時間就和伺服器的時間同步了.
理論是同步的,但實際測試會有1秒的誤差.(具體原因就是和網速有關,網速越快,誤差就越小),但這決不會影響到我們上面的要求了.
執行個體:
代碼：
<?php//php的時間是以秒算。js的時間以毫秒算date_default_timezone_set("Asia/Hong_Kong");//地區//配置每天的啟用時間段$starttimestr = "09:00:00";$endtimestr = "18:30:00";$starttime = strtotime($starttimestr);$endtime = strtotime($endtimestr);$nowtime = time();?><!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>PHP即時倒計時!</title><script language="JavaScript"><!-- //var EndTime=<?=$endtime*1000?>;var NowTime = new Date();//計算出伺服器和用戶端的時間差。var dTime = <?=$nowtime*1000?>-NowTime.getTime();function GetRTime(){var NowTime = new Date();var nMS = EndTime - NowTime.getTime()-dTime;var nH=Math.floor(nMS/(1000*60*60)) % 24;var nM=Math.floor(nMS/(1000*60)) % 60;var nS=Math.floor(nMS/1000) % 60;document.getElementById("RemainH").innerHTML=nH;document.getElementById("RemainM").innerHTML=nM;document.getElementById("RemainS").innerHTML=nS;if(nMS>5*59*1000&&nMS<=5*60*1000){alert("還有最後五分鐘！");}setTimeout("GetRTime()",1000);}window.onload=GetRTime;// --></script></head><body><h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1></body></html>
執行個體2:
修改了上面的一些bug
代碼：
<?php//php的時間是以秒算。js的時間以毫秒算date_default_timezone_set("Asia/Hong_Kong");//地區//配置每天的啟用時間段$starttimestr = "09:00:00";$endtimestr = "18:30:00";$starttime = strtotime($starttimestr);$endtime = strtotime($endtimestr);$nowtime = time();?><!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>PHP即時倒計時!</title><script language="JavaScript"><!-- //var EndTime=<?=$endtime*1000?>;var NowTime = new Date();//計算出伺服器和用戶端的時間差。var dTime = NowTime.getTime()-<?=$nowtime*1000?>;var runtimes = 0;function GetRTime(){var NowTime = new Date();var dTimeNew = NowTime.getTime()-<?=$nowtime*1000?>;var dTimesM = Math.abs(Math.floor((dTimeNew-runtimes*1000-dTime)/1000));//用戶端時間和伺服器目前時間的差if (dTimesM>1) {//如果使用者修改了用戶端時間，就重新load本頁window.location.reload();}var nMS = EndTime - NowTime.getTime()+dTime;var nH=Math.floor(nMS/(1000*60*60)) % 24;var nM=Math.floor(nMS/(1000*60)) % 60;var nS=Math.floor(nMS/1000) % 60;document.getElementById("RemainH").innerHTML=nH;document.getElementById("RemainM").innerHTML=nM;document.getElementById("RemainS").innerHTML=nS;if(nMS>5*59*1000&&nMS<=5*60*1000){alert("還有最後五分鐘！");}runtimes++;setTimeout("GetRTime()",1000);}window.onload=GetRTime;// --></script></head><body><h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1></body></html>
執行個體3:
思路不同,簡單多了.
代碼：
<?php//php的時間是以秒算。js的時間以毫秒算date_default_timezone_set("Asia/Hong_Kong");//地區//配置每天的啟用時間段$starttimestr = "09:00:00";$endtimestr = "13:50:00";$starttime = strtotime($starttimestr);$endtime = strtotime($endtimestr);$nowtime = time();if ($nowtime<$starttime){die("活動還沒開始,啟用時間是：{$starttimestr}至{$endtimestr}");}$lefttime = $endtime-$nowtime; //實際剩下的時間（秒）?><!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>PHP即時倒計時!</title><script language="JavaScript"><!-- //var runtimes = 0;function GetRTime(){var nMS = <?=$lefttime?>*1000-runtimes*1000;var nH=Math.floor(nMS/(1000*60*60))%24;var nM=Math.floor(nMS/(1000*60)) % 60;var nS=Math.floor(nMS/1000) % 60;document.getElementById("RemainH").innerHTML=nH;document.getElementById("RemainM").innerHTML=nM;document.getElementById("RemainS").innerHTML=nS;if(nMS>5*59*1000&&nMS<=5*60*1000){alert("還有最後五分鐘！");}runtimes++;setTimeout("GetRTime()",1000);}window.onload=GetRTime;// --></script></head><body><h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
