jquery countdown effect (exact millisecond, suitable for group purchase)

This article takes the countdown of the group buying website as the background, we know, the website will give each preferential activity (commodity) to set an end time, namely the expiration time, but the system time arrives the end time, means the activity end. Therefore, we will define the end time of the activity in HTML.
Html

The code is as follows

Copy Code

<ul class= "Prolist" >      <li> Simple fashion belt men's watches a 69 yuan <p class= "Endtime Showtime"       value= "1354365003" ></p></li>       <li> High strength non-toxic resin material juice Extractor 24 Yuan <p class= "endtime Showtime"       value= "1350748800" ></p></li>      <li > Tea-sweet tomato/plum/red bayberry 0.48 Yuan <p class= "endtime Showtime"        value= "1346487780" ></p></li>      <li> Beach shoes men's Outdoor sandals 69 yuan <p class=" endtime Showtime "       value=" 1367380800 "> </p></li> </ul>

In the HTML code above, we set up a list of activity names, pictures, and Countdown, and the key is that we define the end time for each activity:. Endtime property value, which is a string of digits representing the number of seconds since January 1, 1970, generated by the background (PHP). For example, the end time 2013-05-01 12:00 can be converted to 1,367,380,800 seconds via PHP, and the number of seconds converted can be used for the next jquery count Countdown.
Css

We need to give the list in 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, preview the page effect, you can see a neat list of activities.
Jquery

The code is as follows

Copy Code

var servertime = * 1000; Server time, number of milliseconds $ (function () { var dateTime = new Date (); var difference = datetime.gettime ()-servertime; Client vs. Server time offset 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)); Days var Myh=math.floor (nms/(1000*60*60))% 24; Hours var Mym=math.floor (nms/(1000*60))% 60; Minutes var mys=math.floor (nms/1000)% 60; Seconds var myms=math.floor (nms/100)% 10; Split seconds if (myd>= 0) { var str = myd+ "Day" +myh+ "Hour" +mym+ "+mys+". +myms+ "seconds"; }else{ var str = "has ended!" "; } Obj.html (str); }); }, 100); Execute once every 0.1 seconds });

We first get the server time, we want to keep the countdown to the server time, so that each client see the countdown is the same, we calculate the client and the server time offset, to avoid the client machine time and server time inconsistent with the countdown caused by the trouble of synchronization. Of course, this server time need to use the service-side language to get, this article uses the PHP () function to get the number of seconds, remember to multiply by 1000 to the number of milliseconds.

We build a timer through the setinterval and execute the setinterval code once every 100 milliseconds.

And then in the timer, we use the each () method of jquery to iterate through the list in the page, counting the days, hours, minutes, and seconds.

Because the gettime () function of JavaScript gets the number of milliseconds, it's going to be 1000 in the calculation process.

We do not want to display all the countdown in the list on one page, but we need the user to slide the mouse over the picture in the list to show the countdown, so 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 effect Diagram

It's finished, let's see 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 "> <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+ "+mys+". +myms+ "seconds"; }else{ var str = "has ended!" "; } Obj.html (str); }); }, 100); $ (". Prolist li img"). each (function () { var img = $ (this); Img.hover (function () { Img.next (). Show (); },function () { Img.next (). Hide (); }); }); }); </script> <body> <div id= "Main" > <div class= "Demo" > <div class= "Times" > <p> Distance January 31, 2014 (Spring Festival) and </p> <div class= "Endtime" value= "1391126400" ></div> </div> <ul class= "Prolist" > <li> Simple fashion belt men's Watch a 69 yuan <p class= "endtime Showtime" Value= "1398902400" >< /p></li> <li> High strength non-toxic resin juice Extractor 24 yuan <p class= "endtime Showtime" Value= "1391212800" >< /p></li> <li> Tea flavor tomato/plum/Myrica rubra 0.48 yuan <p class= "endtime Showtime" Value= "1417392000" >< /p></li> <li> Beach shoes men's Outdoor sandals 69 yuan <p class= "endtime Showtime" Value= "1377380800" ></p ></li> </ul> <div style= "Clear:both" ></div> </div> </div> </body>

If your request is not high can refer to the following jquery countdown effect two

The code is as follows

Copy Code

<! DOCTYPE html> <meta charset=utf-8/> <title>jquery Countdown Effect </title> <style> . Time-item strong{background: #C71C60; 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,0,0,0.2);} #day_show {float:left;line-height:49px;color: #c71c60; 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: "Microsoft Ya Hei"; font-size:40px;margin:20px 0;; Border-bottom:solid 1px #ccc;p adding-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);//Initial Date function Timer (Intdiff) { Window.setinterval (function () { var day=0, Hour=0, Minute=0, second=0;//Time Default value if (Intdiff > 0) { Day = Math.floor (Intdiff/(60 * 60 * 24)); hour = Math.floor (Intdiff/())-(day * 24); minute = Math.floor (INTDIFF/60)-(Day * *)-(hour * 60); Second = Math.floor (Intdiff)-(* * * * (Hour *)-(minute * 60); } if (minute <= 9) minute = ' 0 ' + minute; if (second <= 9) Second = ' 0 ' + second; $ (' #day_show '). html (day+ "days"); $ (' #hour_show '). html (' <s id= "h" ></s> ' +hour+ ' h '); $ (' #minute_show '). html (' <s></s> ' +minute+ ' m '); $ (' #second_show '). html (' <s></s> ' +second+ ' s '); intdiff--; }, 1000); } $ (function () { Timer (Intdiff); }); </script> <body> <div class= "Time-item" > <span id= "Day_show" >0days</span> <strong id= "Hour_show" >0h</strong> <strong id= "Minute_show" >0m</strong> <strong id= "Second_show" >0s</strong> </div><!--Countdown Module--> </body>