這篇文章主要介紹了php實時倒數功能實現方法,結合具體實例形式分析了php結合前台JS的時間戳操作實現倒數計時功能的具體步驟與相關操作技巧,需要的朋友可以參考下
本文實例講述了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>
jQuery實作倒數及簡訊倒數計時功能的實作程式碼
js透過Date物件實作倒數計時動畫效果實例分享
jQuery實作傳送簡訊倒數計時功能
#
以上是php實現即時倒數功能的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!