JQuery implements product activity countdown and jquery product countdown

JQuery implements product activity countdown and jquery product countdown

The countdown is generally used to indicate the time remaining at a certain time point in the future. Countdown is widely used on the WEB, such as the countdown of the examination system and the countdown of discount activities on group buying websites. Today, we will use jQuery to implement a simple countdown function.

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

<Ul class = "prolist"> <li>  simple fashion belt men's watch: RMB 69 <p class = "endtime showtime" value = "1354365003"> </p> </li>  high strength, non-toxic resin material juicer 24 RMB <p class = "endtime showtime "value =" 1350748800 "> </p> </li>  tea tomato/ebony/Yangmei 0.48 RMB <p class = "endtime showtime" value = "1346487780"> </p> </li>  RMB 69 for men's outdoor sandals on beach shoes <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.

.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

Var serverTime = * 1000; // server time, in milliseconds $ (function () {var dateTime = new Date (); var difference = dateTime. getTime ()-serverTime; // The 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 second if (myD> = 0) {var str = myD + "day" + myH + "Hour" + myM + "Minute" + myS + ". "+ myMS +" second ";} else {var str =" ended! ";}Obj.html (str) ;}, 100); // run 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 followingAuxiliary code:

$(function(){   $(".prolist li img").each(function(){     var img = $(this);     img.hover(function(){       img.next().show();     },function(){       img.next().hide();     });   }); }); 

Finally:

The above is all about the countdown and I hope it will be helpful for everyone's learning.