Implementation of a webpage countdown

Webpage countdown onlineCodeA lot of ideas are simple. Compare the current time with the end time, find the time difference, and use the setinterval function of js to achieve dynamic results.

There are two solutions for extracting the current time. If the time precision requirement is not high, the client time can be obtained. Otherwise, the server time is required. The server fetch time is generally obtained using Ajax. I think some of my friends will use ajax to obtain it on the server at a certain frequency. This is the way I use a piece of code today. I will retrieve it on the server every second, this method is not a problem at the beginning, but there is a problem in the case of a large number of users and poor network conditions. Too frequent requests may lead to excessive server pressure and slow response. Later, I took on another idea with my colleagues' reminders, and the accuracy basically met the requirements.

This article provides a relatively simple solution, the idea is to use ajax to get the current time on the server during page loading, and then put a global variable in JS, one second plus one, the method that displays the time is executed every second, and the global variable is subtracted from the execution. The Code is as follows:

Create a blank page (ASP. NET page or HTML page) to display the countdown. Introduce jquery and a JS file (as described below ):

 

< HTML xmlns = " Http://www.w3.org/1999/xhtml " >
< Head runat = " Server " >
< Title > </ Title >
< Script SRC = " JS/jquery-1.4.1.min.js " Type = " Text/JavaScript " > </ Script >
< Script SRC = " JS/test. js " Type = " Text/JavaScript " > </ Script >
</ Head >
< Body >
< Form ID = " Form1 " Runat = " Server " >
< Div >
< SPAN ID = " Auctiontime " Style = " Font-size: 40px; color: red; " > </ Span > < BR />
< SPAN ID = " Count " > </ Span >
</ Div >
</ Form >
</ Body >
</ Html >

Create a new WebService (testws. asmx) to get the server time. The Code is as follows:

 

Using System;
Using System. Collections. Generic;
Using System. LINQ;
Using System. Web;
Using System. Web. Services;
Using System. Globalization;

///   <Summary>
/// Get server time
///   </Summary>
[WebService (namespace =   " Http://tempuri.org/ " )]
[Webservicebinding (conformsto = Wsiprofiles. basicprofile1_1)]
[System. Web. Script. Services. scriptservice]
Public   Class Testws: system. Web. Services. WebService {

PublicTestws (){
}

[webmethod]
Public string getservertime ()
{< br> return datetime. now. addseconds ( 120 ). tostring ( " Mmm DD, yyyy hh: mm: SS " , cultureinfo. getcultureinfo ( " en-US " );
}< BR >}

Then JavaScript calls this WebService to get the server time. The JS (test. JS) code is as follows:

 

VaR Endtime = " Dec, 23:06:00 " ;
$ ( Function (){
Getservertime ();
})

Function Getservertime (){
$. Ajax ({
URL: ' /UI/WS/testws. asmx/getservertime ' ,
Data: ' {} ' ,
Type: ' Post ' ,
Datatype: ' JSON ' ,
Contenttype: ' APP/JSON; charset = UTF-8 ' ,
Cache: False ,
Success: Function (Data ){
Servertime = data. D;
$ ( " # Count " ). Text (count );
Show_time ();
Setinterval ( " Show_time ( ) " , 1000 );
},
Error: Function (Xhr ){
Alert (xhr );
}
});
}
VaR servertime;

VaR timespan = 0;
Function show_time (){
VaR time_distance, str_time;
VaR int_day, int_hour, int_minute, int_second;
VaR time_now = new date (servertime );
VaR time_end = new date ($ ("# endtime"). Text ());
Time_now = time_notesgettime ();
Time_end = time_end.gettime ();
// Obtain the current system time
Time_distance = time_end-time_now-timespan * 1000;
// Time interval.
If (time_distance> = 0 ){
Timespan = timespan + 1;
If (math. Floor (time_distance) <30000 ){
$ ("# Auctiontime" ).css ("color", "# ff0000 ");
}
If (time_distance = 0 ){
If (toop ){
Toop = false;
$ ("# Auctiontime" ).css ("color", "#369a28 ");
$ ("# Currtime"). Text ("00:00:00 ");
$ ("# Auctiontime"). Text ("00:00:00 ");
Getwiner ();
Return;
}
Return;
}
// Extract the day, hour, and minute of the Interval
Int_day = math. Floor (time_distance/86400000 );
Time_distance-= int_day * 86400000;
Int_hour = math. Floor (time_distance/3600000 );
Time_distance-= int_hour* 3600000;
Int_minute = math. Floor (time_distance/60000 );
Time_distance-= int_minute * 60000;
Int_second = math. Floor (time_distance/1000 );

If (int_hour <10)
Int_hour = "0" + int_hour;
If (int_minute <10)
Int_minute = "0" + int_minute;
If (int_second <10)
Int_second = "0" + int_second;
Str_time = int_hour + ":" + int_minute + ":" + int_second;
$ ("# Auctiontime"). Text (str_time );
} Else {}
}

The code is very simple and the structure will not be mentioned, but pay attention to the WebService path. The effect is as follows:

 

 

I only added the current time to the server for 120 seconds, but the time difference here is indeed 119. I checked it here, which is math. floor (), math. floor () is the integer part, so you should add one second for more precision.