JavaScript synchronization server time and Sync Countdown tips _javascript Tips

Source: Internet
Author: User
Tags time interval

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 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 does not occupy the server too many resources, I write Realization of 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>//For the first time the server time is displayed 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.tostr

      ING ()). 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>  

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.