jquery to achieve merchandise activity Countdown _jquery

The countdown is usually used to indicate how much time is left at some point in the future. Countdown to the Web application is very wide, such as the countdown to the exam system, group purchase site discount activities Countdown and so on. Today, we use jquery to implement a simple countdown function.

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

<ul class= "Prolist" > 
   <li> Simple fashion belt men's watches a 69 yuan <p class= "Endtime Showtime " 
   value=" 1354365003 "></p></li> 
   <li></p></li> 
   <li>< IMG src= "images/p3.jpg"/> Tea-sweet tomato/plum/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.

. 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

 var servertime = * 1000;//server time, number of milliseconds $ (function () {var dateTime = new Date (); var difference = datetime.gettime ()-servertime; 
    Client and 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; Second Var myms=math.floor (nms/100)% 10; Split minutes if (myd>= 0) {var str = myd+ "Day" +myh+ "Hours" +mym+ "+mys+". " 
    +myms+ "seconds"; }else{var str = "has ended!"  
    "; 
   } obj.html (str); 
  }); }, 100); Execute 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:

$ (function () { 
  $ (". Prolist li img"). each (function () { 
    var img = $ (this); 
    Img.hover (function () { 
      img.next (). Show (); 
    },function () { 
      img.next (). Hide ();}); 
  };}) 
; 

Final Effect Diagram:

The above is about the countdown to the full content, I hope that the learning of everyone help.