php實時倒計時功能實現方法詳解
文章主要介紹了php實時倒計時功能實現方法,結合具體例項形式分析了php結合前臺JS的時間戳操作實現倒計時功能的具體步驟與相關操作技巧,需要的朋友可以參考下.
這幾天公司要做一個限時購物的功能.這就要做到倒計時,要有實時的倒計時.
要求:
1) 要有小時分鐘秒的實時倒計時的顯示
2)使用者端修改日期時間不會影響到倒計時的正常顯示(也就是以伺服器時間為準)
其實這和很多的`考試等系統的時間限制功能同樣的要求.
解決思路:
1)總不能用ajax每秒都獲取伺服器時間吧.
所以實時倒計時一定要用javascript實現.這很簡單.網上一大把的例子.
2)現在問題是解決使用者端修改日期時間對我們的顯示的影響.
解決的辦法是計算出使用者端的時間和伺服器的時間差.這樣問題的完成解決了.
這樣只需要執行一次php.實時倒計時的時間就和伺服器的時間同步了.
理論是同步的,但實際測試會有1秒的誤差.(具體原因就是和網速有關,網速越快,誤差就越小),但這決不會影響到我們上面的要求了.
例項:
程式碼：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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"
"">
<html xmlns="">
<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?>ime();
function GetRTime(){
var NowTime = new Date();
var nMS = EndTime - ime()-dTime;
var nH=r(nMS/(1000*60*60)) % 24;
var nM=r(nMS/(1000*60)) % 60;
var nS=r(nMS/1000) % 60;
lementById("RemainH")rHTML=nH;
lementById("RemainM")rHTML=nM;
lementById("RemainS")rHTML=nS;
if(nMS>5*59*1000&&nMS<=5*60*1000)
{
alert("還有最後五分鐘！");
}
setTimeout("GetRTime()",1000);
}
ad=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
程式碼：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
