For example, if you want to create a limited-time shopping function, you need to have a countdown and a real-time countdown.
It is required to display a real-time countdown of hours, minutes and seconds. Modifying the date and time on the client side will not affect the normal display of the countdown (that is, based on the server time).
In fact, this is the same requirement as the time limit function of many exam and other systems.
You can’t use ajax to get the server time every second, so the real-time countdown must be implemented with javascript. This is very simple, there are a lot of examples on the Internet.
Now the problem is to solve the impact of the user-side modified date and time on our display.
The solution is to calculate the time difference between the client time and the server time, so that the problem is solved.
In this way, you only need to run php once, and the real-time countdown time will be synchronized with the server time.
The theory is synchronous, but there will be an error of 1 second in actual testing. (The specific reason is related to the Internet speed. The faster the Internet speed, the smaller the error.) But this will never affect our above requirements.
Note: Flash sale time is from morning to 10pm.
Code is as follows:
<?php //php的时间是以秒算。js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "08:00:00"; $endtimestr = "22:00:00"; $starttime = strtotime($starttimestr); $endtime = strtotime($endtimestr); $nowtime = time(); if ($nowtime<$starttime){ die("活动还没开始,活动时间是:{$starttimestr}至{$endtimestr}"); } $lefttime = $endtime-$nowtime; //实际剩下的时间(秒) ?> <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> <h4><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h4>