jQuery implémente l'activité du produit countdown_jquery

Le compte à rebours est généralement utilisé pour indiquer combien de temps il reste entre un certain moment dans le futur et le moment présent. Les comptes à rebours sont largement utilisés sur le WEB, comme les comptes à rebours des systèmes d'examens, les comptes à rebours d'activités préférentielles dans les sites d'achats groupés, etc. Aujourd'hui, nous utiliserons jQuery pour implémenter une simple fonction de compte à rebours.

Cet article est basé sur le compte à rebours d'un site Web d'achat groupé. Nous savons que le site Web fixera une heure de fin pour chaque promotion (produit), qui est l'heure d'expiration. Mais lorsque l'heure du système atteint l'heure de fin, elle est utilisée. signifie que l'activité est terminée. Par conséquent, nous devons définir l’heure de fin de l’activité en 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> 

Dans le code html ci-dessus, nous créons une liste pour afficher les noms d'événements, les images et les comptes à rebours. La clé est que nous définissons l'heure de fin de chaque activité : la valeur de l'attribut .endtime, qui est une chaîne de nombres. . , représentant le nombre de secondes depuis le 1er janvier 1970, générées par le backend (PHP). Par exemple, l'heure de fin du 01/05/2013 à 12h00 peut être convertie en 1367380800 secondes via PHP, et les secondes converties peuvent être utilisées dans le compte à rebours de calcul jQuery suivant.
CSS
Nous devons donner à la liste sur la page une apparence légèrement plus agréable.

.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} 

Enregistrez et prévisualisez l'effet de page, vous pouvez voir une liste d'activités bien organisée.
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秒执行一次 
}); 

Nous obtenons d'abord l'heure du serveur. Nous devons garder le compte à rebours cohérent avec l'heure du serveur, afin que le compte à rebours vu par chaque client soit le même. Nous évitons cela en calculant le décalage horaire entre le client et le serveur. Le problème de désynchronisation du compte à rebours est dû au fait que l'heure de la machine cliente n'est pas cohérente avec l'heure du serveur. Bien entendu, ce temps serveur doit être obtenu à l'aide d'un langage côté serveur. Cet article utilise le nombre de secondes obtenu par la fonction time() de PHP. Pensez à le multiplier par 1000 pour le convertir en millisecondes.
Nous créons une minuterie via setInterval et exécutons le code dans setInterval toutes les 100 millisecondes.
Ensuite, dans le minuteur, nous utilisons la méthode each() de jQuery pour parcourir la liste sur la page et calculer les jours, les heures, les minutes et les secondes.
Étant donné que la fonction getTime() de JavaScript obtient le nombre de millisecondes, /1000 est utilisé dans le processus de calcul,
Nous ne voulons pas afficher tous les comptes à rebours de la liste sur une seule page, mais demandons à l'utilisateur de faire glisser la souris sur l'image dans la liste pour afficher le compte à rebours correspondant, nous devons donc également ajouter le code auxiliaire suivant :

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

Rendu final :

Ce qui précède concerne le compte à rebours. J’espère que cela sera utile à l’étude de chacun.