Jquery countdown effect (precise to milliseconds, suitable for group buying)

Jquery countdown has been mentioned many times before. The jquery countdown effect is based on the countdown of group buying websites. If you are interested, please refer to it.

This article takes the countdown of the Group Buying website as the background. We know that the website will set an end time for each promotion activity (commodity), that is, the expiration time, but the system time has reached the end time, this means that the activity is over. Therefore, we need to define the activity end time in HTML.
HTML

The Code is as follows:

Copy code

<Ul class = "prolist"> <Li> simple fashion belt men's watch: RMB 69 <p class = "endtime showtime" Value = "1354365003"> </p> </li> <Li> 24 RMB high strength, non-toxic resin juicer <p class = "endtime showtime" Value = "1350748800"> </p> </li> <Li> tea tomato/ebony/Yangmei 0.48 RMB <p class = "endtime showtime" Value = "1346487780"> </p> </li> <Li> beach shoes, men's outdoor sandals, RMB 69 <p class = "endtime showtime" Value = "1367380800"> </p> </li> </Ul>

In the preceding html code, we create a list to display activity names, images, and countdown. The key is that we define the end time for each activity :. the value of the endtime attribute, which is a string of numbers, indicating the number of seconds since January 1, January 1, 1970, generated by the backend (PHP. For example, the end time may be converted to 1367380800 seconds through PHP at, and the number of seconds after conversion can be used for the next jQuery countdown.
CSS

We need to give the list on the page a slightly better look.

The Code is as follows:	Copy code
. Endtime {font-size: 20px; font-family: "Microsoft Yahei"; color: #000} . Prolist {margin: 10px auto} . Prolist li {float: left; width: 320px; height: 240px; margin: 10px; font-size: 14px; Position: relative} . Prolist li img {width: 320px; height: 198px ;} . Showtime {position: absolute; top: 174px; height: 24px; line-height: 24px; Background: #333; color: # fff; opacity:. 6; display: none}

Save and preview the page effect. You can see a neatly arranged activity list.
JQuery

The Code is as follows:

Copy code

Var serverTime = * 1000; // server time, in milliseconds $ (Function (){ Var dateTime = new Date (); Var difference = dateTime. getTime ()-serverTime; // Time Offset between the client and the server SetInterval (function (){ $ (". Endtime"). each (function (){ Var obj = $ (this ); Var endTime = new Date (parseInt (obj. attr ('value') * 1000 ); Var nowTime = new Date (); Var nMS = endTime. getTime ()-nowTime. getTime () + difference; Var myD = Math. floor (nMS/(1000*60*60*24); // day Var myH = Math. floor (nMS/(1000*60*60) % 24; // hour Var myM = Math. floor (nMS/(1000*60) % 60; // minute Var myS = Math. floor (nMS/1000) % 60; // second Var myMS = Math. floor (nMS/100) % 10; // split seconds If (myD> = 0 ){ Var str = myD + "day" + myH + "Hour" + myM + "Minute" + myS + "." + myMS + "second "; } Else { Var str = "ended! "; } Obj.html (str ); }); }, 100); // execute once every 0.1 seconds });

First, we get the server time. We need to keep the countdown consistent with the server time. In this way, each client sees the same countdown. We calculate the time offset between the client and the server, to avoid the trouble of non-sync countdown because the time of the customer's machine is inconsistent with the server time. Of course, this server time needs to be obtained using the server language. In this article, we use the time () function of PHP to obtain the number of seconds. Remember to multiply by 1000 and convert it to the number of milliseconds.

We use setInterval to create a timer and execute the code in setInterval every 100 milliseconds.

Then, in the timer, we use jQuery's each () method to traverse the list on the page and calculate the day, hour, minute, and second.

Because the getTime () function of javascript gets the number of milliseconds, it requires/1000 in the calculation process,

We do not want to display all the countdown times in the list on a page, but you need to slide the mouse to the image in the list to display the corresponding countdown. Therefore, we need to add the following auxiliary code:

The Code is as follows:	Copy code
$ (Function (){ $ (". Prolist li img"). each (function (){ Var img = $ (this ); Img. hover (function (){ Img. next (). show (); }, Function (){ Img. next (). hide (); }); }); });

Final

The above is finished. The following figure shows the effect.

The Code is as follows:

Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Link rel = "stylesheet" type = "text/css" href = "../css/main.css"/> <Style type = "text/css"> . Demo {width: 700px; margin: 30px auto} . Times {height: 80px; width: 320px; margin: 0 auto; background: url (images/clock.jpg) no-repeat; padding-left: 50px} . Times p {height: 20px; line-height: 20px ;} . Endtime {font-size: 20px; font-family: "Microsoft Yahei"; color: #000} . Prolist {margin: 10px auto} . Prolist li {float: left; width: 320px; height: 240px; margin: 10px; font-size: 14px; position: relative} . Prolist li img {width: 320px; height: 198px ;} . Showtime {position: absolute; top: 174px; height: 24px; line-height: 24px; background: #333; color: # fff; opacity:. 6; display: none} </Style> <Script type = "text/javascript" src = "../js/jquery. js"> </script> <Script type = "text/javascript"> Var serverTime = 1384574162*1000; $ (Function (){ Var dateTime = new Date (); Var difference = dateTime. getTime ()-serverTime;   SetInterval (function (){ $ (". Endtime"). each (function (){ Var obj = $ (this ); Var endTime = new Date (parseInt (obj. attr ('value') * 1000 ); Var nowTime = new Date (); Var nMS = endTime. getTime ()-nowTime. getTime () + difference; Var myD = Math. floor (nMS/(1000*60*60*24 )); Var myH = Math. floor (nMS/(1000*60*60) % 24; Var myM = Math. floor (nMS/(1000*60) % 60; Var myS = Math. floor (nMS/1000) % 60; Var myMS = Math. floor (nMS/100) % 10; If (myD> = 0 ){ Var str = myD + "day" + myH + "Hour" + myM + "Minute" + myS + "." + myMS + "second "; } Else { Var str = "ended! "; } Obj.html (str ); }); },100 );     $ (". Prolist li img"). each (function (){ Var img = $ (this ); Img. hover (function (){ Img. next (). show (); }, Function (){ Img. next (). hide (); }); }); }); </Script> </Head> <Body> <Div id = "main"> <Div class = "demo"> <Div class = "times"> <P> there is still a gap between January 31, 2014 and the Spring Festival. </p> <Div class = "endtime" value = "1391126400"> </div> </Div> <Ul class = "prolist"> <Li> simple fashion belt men's watch $69 <p class = "endtime showtime" value = "1398902400"> </p> </li> <Li> 24 RMB high strength, non-toxic resin juicer <p class = "endtime showtime" value = "1391212800"> </p> </li> <Li> tea tomato/ebony/Yangmei 0.48 yuan <p class = "endtime showtime" value = "1417392000"> </p> </li> <Li> 1377380800 RMB for men's outdoor sandals <p class = "endtime showtime" value = ""> </p> </ li> </Ul> <Div style = "clear: both"> </div> </Div>   </Div> </Body> </Html>

If your requirements are not high, refer to jquery countdown result 2 below.

 

The Code is as follows:

Copy code

<! DOCTYPE html> <Html> <Head> <Meta charset = UTF-8/> <Title> jquery countdown effect </title> <Style> . Time-item strong {background: # c7160; color: # fff; line-height: 49px; font-size: 36px; font-family: Arial; padding: 0 10px; margin-right: 10px; border-radius: 5px; box-shadow: 1px 1px 3px rgba (0.2, 0 );} # Day_show {float: left; line-height: 49px; color: # c7160; font-size: 32px; margin: 0 10px; font-family: Arial, Helvetica, sans-serif ;} . Item-title. unit {background: none; line-height: 49px; font-size: 24px; padding: 0 10px; float: left ;} H1 {font-family: ""; font-size: 40px; margin: 20px 0; border-bottom: solid 1px # ccc; padding-bottom: 20px; letter-spacing: 2px ;} </Style> <Script src = "/img/jquery-1.7.2.min.js" type = "text/javascript"> </script> <Script type = "text/javascript"> Var intDiff = parseInt (200000); // the initial date. Function timer (intDiff ){ Window. setInterval (function (){ Var day = 0, Hour = 0, Minute = 0, Second = 0; // default time If (intDiff> 0 ){ Day = Math. floor (intDiff/(60*60*24 )); Hour = Math. floor (intDiff/(60*60)-(day * 24 ); Minute = Math. floor (intDiff/60)-(day * 24*60)-(hour * 60 ); Second = Math. floor (intDiff)-(day * 24*60*60)-(hour * 60*60)-(minute * 60 ); } If (minute <= 9) minute = '0' + minute; If (second <= 9) second = '0' + second; Certificate ('day_show'0000.html (day + "days "); Certificate ('{hour_show'{.html ('<s id = "h"> </s>' + hour + 'H '); Certificate ('{minute_show'{.html ('<s> </s>' + minute + 'M '); ('{Second_show'{.html ('<s> </s>' + second +'s '); IntDiff --; },1000 ); } $ (Function (){ Timer (intDiff ); }); </Script> </Head> <Body> <H1> countdown on the webpage <Div class = "time-item"> <Span id = "day_show"> 0 days </span> <Strong id = "hour_show"> 0 h </strong> <Strong id = "minute_show"> 0 m </strong> <Strong id = "second_show"> 0 s </strong> </Div> <! -- Countdown module --> </Body> </Html>