Many websites are now doing spike products,And one of the important links is the countdown.

Regarding the countdown,There are several points to note:

1. Server time should be used instead of local time (local time has problems with different time zones, user settings, etc.).

2. Consider the time consuming of network transmission.

3. The time can be read directly from the response header of ajax (obtained by getresponseheader ("date")). The server does not need to write a time generation script.

Process analysis:

1. After reading a timestamp from the server, start timing,Regardless of the time consuming of network transmission:

The labels in the figure are respectively (the timeline above uses standard time,Has nothing to do with server and page time):

start-the time when the page item server initiated the ajax request.

www_start-The time when the server responded to the page request and returned a timestamp to the page.

pc_start-The time the page received the timestamp returned by the server and started timing.

www_end-the time at which the server countdown ends.

pc_end-the time at which the page countdown ends,It is also the time when the user clicks the button at the end of the countdown.

end-the time when the server receives the user click information.

As can be seen,Even when the countdown ends (that is, the moment the spike starts) the user immediately clicks the mouse,It will also be later than the actual start of the snap shot (www_end, the time when the server countdown ends) (it can be easily seen thatThis time difference is exactly equal to pc_start-start, that is, the time it takes for ajax to send to receive the response message). If some experts send a request in a script before the page countdown ends,Then other users can lose money.Therefore, we need to solve this problem of time error.

2. In order to solve the problem of time error,We will shorten the page countdown time by a small amount (from the analysis above,This small cut is exactly equal to pc_start-start), so that the snap shot information that the user sends to the server at the end of the countdown is received at the end of the server countdown:

The labels in the figure are the same as in pic.1 (the timeline uses standard time,It has nothing to do with the time of the server and page), the meaning of the two new annotations is as follows:

old_pc_end-The time of pc_end without processing the network transmission time.

old_end-the end time without processing the network transmission time.

It can be seen from pic.2 that the time error caused by the network transmission time has been completely compensated.The remedy is to "advance the end of the countdown by pc_start-start". But it solves the problem of errors caused by time-consuming network transmission.There is also the problem that the user's computer time is different from the server time.Let's continue the discussion.

3. The user's computer time and server time must be different.Even a few time zones,How to solve this problem?The main points of the method are as follows:

a. When the page receives the timestamp www_t returned by the server, it immediately starts timing.

b. When the page receives the timestamp www_t returned by the server, immediately calculate the time difference between the local time and the timestamp returned by the server t=new date (). gettime ()-www_t * 1000.

c. Still use new date (). gettime () instead of setinterval () (the timer is very unstable,The error is also large), but the time display and the logic of the program must be based on the local time and the time deviation t obtained in the previous step (b).


The page is timed from the timestamp when the server response was received,The length of the timing should reduce the time taken by ajax from sending to receiving,The timing process is implemented using local time (local time + time offset).

Javascript tips:sync server time, sync countdown

I saw some questions on the Internet before,How to synchronize the server time on the page,There are actually several ways to achieve this,Perhaps most people immediately think that you can use ajax to request the server every one second,Then the server gets the time and displays it on the page.Although this can be achieved,But there is a big problem,That is to request the server every second,So if there are too many users,The server will crash (the memory usage will be large), so in my opinion,This method is not feasible,I give a solution here,Ability to synchronize server time, synchronize countdown,Without taking up too much resources on the server,Let me write the implementation ideas

The first step is when the user browses the page for the first time,The server first obtains the current time and displays it on the page (for example:displayed in the id timebox span)

The second step is to set a new time to be calculated every one second (the new time uses the server time as the initial value,And then accumulate one second every second and generate new time)

The third step shows the time calculated in the second step

Is not it simple,In a word:server time as the initial value,And then automatically accumulate one second on the page every second to generate a new time,This will ensure synchronization with the server time,The error is basically within a few seconds,It should be okay,Okay, let's take a look at the implemented code:

<span>11:21:55</span>//Show server time here for the first time
<script type="text/javascript">
  $(function () {
    var otime=$("#timebox");
    var ts=otime.text (). split (":", 3);
    var tnums=[parseint (ts [0]), parseint (ts [1]), parseint (ts [2])];
    setinterval (function () {
      tnums=getnexttimenumber (tnums [0], tnums [1], tnums [2]);
      shownewtime (tnums [0], tnums [1], tnums [2]);
    }, 1000);
    function shownewtime (h, m, s) {
      var timestr=("0" + h.tostring ()). substr (-2) + ":"
              + ("0" + m.tostring ()). Substr (-2) + ":"
              + ("0" + s.tostring ()). Substr (-2);
      otime.text (timestr);
    function getnexttimenumber (h, m, s) {
      if (++ s == 60) {
      if (s == 0) {
        if (++ m == 60) {
      if (m == 0) {
        if (++ h == 24) {
      return [h, m, s];

The code is very simple and will not be explained here (I only show hours, minutes and seconds above,You can also add dates,Add the date to get a date or complete time directly from the server when h == 0,As a time proofreading), those who do not understand can comment below,I will reply in time,Then follow this idea to achieve a synchronous countdown,First of all,What is a synchronous countdown,It's like spike.Set an end time,Then calculate the interval between the current time and the end time,And it must be ensured that the countdown time displayed on different computers and browsers is the same,The implementation code is as follows:

<! Doctype html>
  <title>Sync Countdown</title>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <span>1 day, 00:00 minutes, 12 seconds</span><
  <script type="text/javascript">
    $(function () {
      var tid=setinterval (function () {
        var otimebox=$("#timebox");
        var sytime=otimebox.text ();
        var totalsec=gettotalsecond (sytime)-1;
        if (totalsec>= 0) {
          otimebox.text (getnewsytime (totalsec));
        } else {
          clearinterval (tid);
      }, 1000);
      //Calculate the total number of seconds based on the remaining time string
      function gettotalsecond (timestr) {
        var reg =/\ d +/g;
        var timenums=new array ();
        while ((r=reg.exec (timestr))!=null) {
          timenums.push (parseint (r));
        var second=0, i=0;
        if (timenums.length == 4) {
          second +=timenums [0] * 24 * 3600;
        second +=timenums [i] * 3600 + timenums [++ i] * 60 + timenums [++ i];
        return second;
      //Generate the time format based on the remaining seconds
      function getnewsytime (sec) {
        var s=sec%60;
        var m=sec%60;
        var h=sec%24;
        var d=(sec-h)/24;//day
        var sytimestr="";
        if (d>0) {
          sytimestr +=d.tostring () + "day";
        sytimestr +=("0" + h.tostring ()). substr (-2) + "Time"
              + ("0" + m.tostring ()). Substr (-2) + "point"
              + ("0" + s.tostring ()). Substr (-2) + "second";
        return sytimestr;
  • Previous Detailed destructors in C ++ programming
  • Next Detailed ajax + jtemplate implementation of dynamic paging