jQuery は製品アクティビティ countdown_jquery を実装します

カウントダウンは通常、将来の特定の瞬間から現在の瞬間までの残り時間を示すために使用されます。試験制度のカウントダウンや共同購入サイトの優待活動のカウントダウンなど、WEB上ではカウントダウンが広く使われています。今回はjQueryを使って簡単なカウントダウン関数を実装してみます。

この記事は、共同購入 Web サイトのカウントダウンに基づいています。Web サイトでは、各プロモーション (商品) に有効期限が設定されていますが、システム時間が終了時間に達すると、終了時間が設定されます。活動が終了したことを意味します。したがって、アクティビティの終了時刻を 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> 

上記の HTML コードでは、イベント名、画像、カウントダウンを表示するリストを作成します。重要なのは、各アクティビティの終了時刻 (数値の文字列である .endtime 属性値) を定義していることです。 . は、バックエンド (PHP) によって生成された、1970 年 1 月 1 日からの秒数を表します。たとえば、終了時刻 2013-05-01 12:00 は、PHP を通じて 1367380800 秒に変換でき、変換された秒はその後の jQuery 計算のカウントダウンで使用できます。
CSS
ページ上のリストの外観をもう少し良くする必要があります。

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

ページ効果を保存してプレビューすると、きちんと整理されたアクティビティのリストが表示されます。
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秒执行一次 
}); 

最初にサーバー時間を取得します。これを回避するには、クライアントとサーバー間の時間オフセットを計算します。カウントダウンが同期しない問題は、クライアント マシンの時刻がサーバーの時刻と一致しないことが原因で発生します。もちろん、このサーバー時間はサーバー側言語を使用して取得する必要があります。この記事では、PHP の time() 関数で取得した秒数を使用して、ミリ秒に変換することを忘れないでください。
setInterval を通じてタイマーを作成し、setInterval のコードを 100 ミリ秒ごとに実行します。
次にタイマーで、jQuery の each() メソッドを使用してページ上のリストを走査し、日、時間、分、秒を計算します。
JavaScriptのgetTime()関数はミリ秒数を取得するため、計算処理では/1000を使用します
リスト内のすべてのカウントダウンを 1 ページに表示するのではなく、ユーザーがリスト内の画像の上でマウスをスライドして対応するカウントダウンを表示する必要があるため、次の 補助コードも追加する必要があります。 :

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

最終レンダリング:

以上はカウントダウンについてですが、皆さんの勉強に役立てば幸いです。