jQuery implementiert Produktaktivität countdown_jquery

Countdown wird im Allgemeinen verwendet, um anzuzeigen, wie viel Zeit zwischen einem bestimmten Moment in der Zukunft und dem gegenwärtigen Moment verbleibt. Countdowns werden im WEB häufig verwendet, z. B. Countdowns für Prüfungssysteme, Countdowns für bevorzugte Aktivitäten auf Gruppenkauf-Websites usw. Heute werden wir jQuery verwenden, um eine einfache Countdown-Funktion zu implementieren.

Dieser Artikel basiert auf dem Countdown einer Gruppenkauf-Website. Wir wissen, dass die Website eine Endzeit für jede Aktion (Ware) festlegt. Dies ist jedoch die Ablaufzeit bedeutet, dass die Aktivität beendet ist. Daher müssen wir die Endzeit der Aktivität in HTML definieren.
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> 

Im obigen HTML-Code erstellen wir eine Liste zur Anzeige von Ereignisnamen, Bildern und Countdowns. Der Schlüssel besteht darin, dass wir die Endzeit für jede Aktivität definieren: den Wert des .endtime-Attributwerts, der eine Zahlenfolge ist . , stellt die Anzahl der Sekunden seit dem 1. Januar 1970 dar, die vom Backend (PHP) generiert wurden. Beispielsweise kann die Endzeit 2013-05-01 12:00 über PHP in 1367380800 Sekunden konvertiert werden, und die konvertierten Sekunden können im nachfolgenden jQuery-Berechnungscountdown verwendet werden.
CSS
Wir müssen der Liste auf der Seite ein etwas schöneres Aussehen verleihen.

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

Speichern Sie den Seiteneffekt und zeigen Sie ihn in der Vorschau an. Sie können eine übersichtliche Liste der Aktivitäten sehen.
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秒执行一次 
}); 

Wir müssen den Countdown mit der Serverzeit konsistent halten, damit der Countdown für jeden Client gleich ist. Wir vermeiden dies, indem wir den Zeitversatz zwischen dem Client und dem Server berechnen Das Problem, dass der Countdown nicht synchron ist, wird dadurch verursacht, dass die Zeit des Client-Computers nicht mit der Serverzeit übereinstimmt. Natürlich muss diese Serverzeit mithilfe einer serverseitigen Sprache ermittelt werden. In diesem Artikel wird die Anzahl der Sekunden verwendet, die von der Funktion time() von PHP ermittelt werden. Denken Sie daran, sie mit 1000 zu multiplizieren, um sie in Millisekunden umzuwandeln.
Wir erstellen über setInterval einen Timer und führen den Code in setInterval alle 100 Millisekunden aus.
Dann verwenden wir im Timer die Methode every() von jQuery, um die Liste auf der Seite zu durchlaufen und die Tage, Stunden, Minuten und Sekunden zu berechnen.
Da die Funktion getTime() von JavaScript die Anzahl der Millisekunden ermittelt, wird im Berechnungsprozess /1000 verwendet,
Wir möchten nicht alle Countdowns in der Liste auf einer Seite anzeigen, sondern erfordern, dass der Benutzer mit der Maus über das Bild in der Liste fährt, um den entsprechenden Countdown anzuzeigen. Daher müssen wir auch den folgenden Hilfscode hinzufügen :

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

Endgültiges Rendering:

Bei dem oben Gesagten dreht sich alles um den Countdown. Ich hoffe, dass er für das Lernen aller hilfreich sein wird.