jQuery implements product activity countdown_jquery

Countdown is generally used to indicate how much time is left between a certain moment in the future and the present moment. Countdowns are widely used on the WEB, such as exam system countdowns, preferential activity countdowns in group purchase websites, etc. Today, we will use jQuery to implement a simple countdown function.

This article is based on the countdown of a group buying website. We know that the website will set an end time for each promotion (commodity), which is the expiration time. But when the system time reaches the end time, it means the activity is over. Therefore, we need to define the end time of the activity in HTML.
HTML

<ul class="prolist"> 
   <li><img src="images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endtime showtime" 
   value="1354365003"></p></li> 
   <li><img src="images/p2.jpg" />高强度无毒树脂材料榨汁器24元<p class="endtime showtime" 
   value="1350748800"></p></li> 
   <li><img src="images/p3.jpg" />茶香番茄/乌梅/杨梅0.48元<p class="endtime showtime" 
   value="1346487780"></p></li> 
   <li><img src="images/p4.jpg" />沙滩鞋男士户外凉鞋69元<p class="endtime showtime" 
   value="1367380800"></p></li> 
</ul> 

In the above html code, we create a list to display event names, pictures and countdowns. The key is that we define the end time for each activity: the value of the .endtime attribute value, which is a string of numbers. , representing the number of seconds since January 1, 1970, generated by the backend (PHP). For example, the end time 2013-05-01 12:00 can be converted to 1367380800 seconds through PHP, and the converted seconds can be used in the subsequent jQuery calculation countdown.
CSS
We need to give the list on the page a slightly nicer appearance.

.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 list of activities.
jQuery

var serverTime = * 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+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒"; 
    }else{ 
      var str = "已结束！";  
    } 
    obj.html(str); 
   }); 
  }, 100); //每个0.1秒执行一次 
}); 

We first get the server time. We need to keep the countdown consistent with the server time, so that the countdown seen by each client is the same. We avoid this by calculating the time offset between the client and the server. The trouble of countdown being out of sync is caused by the client machine time being inconsistent with the server time. Of course, this server time needs to be obtained using a server-side language. This article uses the number of seconds obtained by PHP's time() function. Remember to multiply it by 1000 to convert it into milliseconds.
We create a timer through setInterval 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 days, hours, minutes, and seconds.
Because the getTime() function of JavaScript obtains the number of milliseconds, /1000 is used in the calculation process,
We don’t want to display all the countdowns in the list on one page, but require the user to slide the mouse over the picture in the list to display the corresponding countdown, so we also 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 rendering:

The above is all about the countdown. I hope it will be helpful to everyone’s study.