jQuery는 제품 활동 countdown_jquery를 구현합니다.

카운트다운은 일반적으로 미래의 특정 순간과 현재 순간 사이에 남은 시간을 나타내는 데 사용됩니다. 카운트다운은 시험 시스템 카운트다운, 공동 구매 웹사이트의 우대 활동 카운트다운 등 WEB에서 널리 사용됩니다. 오늘은 jQuery를 이용해 간단한 카운트다운 기능을 구현해보겠습니다.

이 글은 공동 구매 웹사이트의 카운트다운을 기반으로 합니다. 웹사이트에서는 각 프로모션(상품)에 종료 시간, 즉 만료 시간을 설정하는 것으로 알고 있습니다. 하지만 시스템 시간이 종료 시간에 도달하면 종료됩니다. 활동이 끝났다는 뜻이에요. 따라서 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() 함수로 얻은 초 수를 밀리초로 변환하기 위해 1000을 곱해야 합니다.
setInterval을 통해 타이머를 생성하고 100밀리초마다 setInterval의 코드를 실행합니다.
그런 다음 타이머에서 jQuery의 Each() 메서드를 사용하여 페이지의 목록을 탐색하고 일, 시간, 분, 초를 계산합니다.
JavaScript의 getTime() 함수는 밀리초 단위의 숫자를 구하므로 계산 과정에서 /1000이 사용됩니다.
목록의 모든 카운트다운을 한 페이지에 표시하고 싶지는 않지만 사용자가 목록의 그림 위로 마우스를 밀어 해당 카운트다운을 표시해야 하므로 다음 보조 코드도 추가해야 합니다. :

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

최종 렌더링:

위 내용은 모두의 카운트다운에 관한 내용입니다.