JavaScript to implement product seconds to kill Countdown (time and server time synchronization) _javascript skills

Now there are a lot of websites are doing seconds to kill goods, and this one of the most important part is the countdown.

On the countdown, there are several points to note:

1. The server time should be used instead of the local time (the local time is different, the user sets the problem).

2. Consider the time consuming of network transmissions.

3. Acquisition time can be directly read from the AJAX response header (via getResponseHeader (' Date '), the server side does not need to write time to generate scripts.

Process Analysis:

1. When a timestamp is read from the server, the timing is not considered, regardless of the time spent on the network transfer:

Each annotation in the figure is (the timeline above is standard time, regardless of the server and the time of the page):

start--the time when the page entry server originated an AJAX request.

www_start--the server responds to the request of the page and returns the time it was stamped to the page.

The pc_start--page accepts the time stamp returned by the server and starts timing.

www_end--the time the server countdown ended.

pc_end--page Countdown to the end of the time, but also the user at the end of the countdown to click on the button time.

end--the server receives the user clicks the information the time.

Can be seen, even in the countdown to the end of the moment (that is, seconds to kill the beginning of the moment) the user immediately click on the mouse, will also start snap than the actual time (Www_end, that is, the server countdown to the end of the time) some later (can easily see, this difference is exactly That is, the time it takes for Ajax to be sent from start to receive response information. If some insiders send a request with a script before the end of the page countdown, the other users will lose a lot of money. So, we have to solve this problem of time error.

2. In order to solve the problem of time error, we will shorten the time of the countdown to a small section (from the above analysis can be drawn, this small cut is exactly equal to Pc_start-start), so that users at the end of the countdown to the server snap information is received at the end of the countdown to the server:

The annotations in the diagram are the same as in the Pic.1 (the timeline takes a standard time, regardless of the server and the time of the page), and the new two annotations have the following meanings:

old_pc_end--the time that is pc_end when the network transport is not time-consuming to process.

old_end--the end when the network transport is not time-consuming to process.

By PIC.2, the time error caused by the network transmission is completely made up, and the method of making up the time of the countdown is "Pc_start-start". But it solves the problem of the error caused by the time of the network transmission, and the problem that the user's computer times and the server time are different, we continue to discuss.

3. The user's computer time and server time must be different, or 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, the timer starts immediately.

B. When the page receives the timestamp www_t returned by the server, the time difference between the local time and the timestamp returned by the server is calculated immediately t=new date (). GetTime ()-www_t*1000.

C. You still use the new Date (). GetTime () to time, rather than using the SetInterval () function (the timer is very unstable and the error is very large), but the display of time and the logic of the program must be based on the local time and the temporal deviation of the previous step (b) t.

Main points of conclusion:

The page starts with a timestamp that receives a response from the server, and the time of the timer should be reduced by the time it takes to get the Ajax from sending to receiving the whole process, while the timing process uses local time to implement (local time + time deviation).

Have any questions or suggestions please leave a message, thank you!

JavaScript tips: Sync server time, Sync countdown

I saw someone ask questions on the Internet before, how to synchronize the display of server time on the page, in fact, there are several ways to implement, perhaps the average person immediately think that you can use Ajax every second to request the server, and then get the server to the time displayed on the page, so although it can be achieved, but there is a big problem, That is to request the server every second, so that if the user is more, the server will crash (memory occupancy rate will be very large), so in my opinion, this method is not feasible, I give a solution here, to achieve synchronization server time, synchronization countdown, but do not occupy the server too many resources, the following I write to realize the idea

First, when the user browses the page for the first time, the server first gets the current time and displays it on the page (for example: Display in the ID timebox span)

The second step is to set a new time to calculate every second (the new time is the initial value of the server time, then add a second every second and generate a new time)

The third step, showing the time of the second step calculation

is not very simple, summed up in a sentence is: The server time for the initial value, and then automatically every second on the page to add a second generation of new time, so as to ensure the synchronization with the server time, the error is basically in a few seconds, it should not matter, well look at the implementation of the Code:

 <span id= "Timebox" >11:21:55</span>//The first time the server time is shown here <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.tostrin
      g ()). substr ( -2) + ":" + ("0" + s.tostring ()). substr (-2);
    Otime.text (TIMESTR);
      The function Getnexttimenumber (H, M, s) {if (++s = =) {s = 0;
        } if (s = = 0) {if (++m = =) {m = 0;
        } if (M = = 0) {if (++h = =) {h = 0;
    } return [H, M, S];
}
  }); </script> 

The

Code is very simple here is not much to explain (I only show the minutes and seconds, we can add a date, plus the date can be in when h==0, directly from the server to obtain a date or full time, as a time of proofreading, do not understand the following comments, I will promptly reply, And then follow this line of thought to achieve the synchronization countdown, first of all, what is the synchronization countdown, is like a second kill, set an end time, and then calculate the current time and end time between the interval, and must ensure that in different computers, browsers show the same countdown time, the implementation code is as follows:

<! DOCTYPE html>  

To ensure the accuracy of the countdown, I used the countdown to the time interval to unify the calculation into seconds, then minus 1 seconds and then regenerate time format, of course, can also be in accordance with the above time synchronization examples, direct time reduction, a lot of, I this is not necessarily the best, welcome to Exchange, thank you!