남은시간 표시하기

소셜쇼핑 등에 있는 남은시간 표시하기
http://keith-wood.name/countdownBasics.html



item.form.skin.php 파일에 추가

<!-- 남은 시간 { -->
<script src="<?php echo G5_JS_URL; ?>/jquery.plugin.js"></script>
<script src="<?php echo G5_JS_URL; ?>/jquery.countdown.js"></script>
<!-- } 남은 시간 -->

<?
// 종료시간 - Ex) 3월 24일 오후 2시
$endtime = mktime('14','00','00','03','24','2014') ;

// 판매 가능하고 재고가 있으며 품절이 아닐때, 종료시간 전일때
if ( $it[it_use] && !$it[it_soldout] && $it[it_stock_qty] > 0 && $endtime>time()) ) {

// 남은 시간
$countdown = $endtime - time();
//echo $countdown;
?>
<div class="buy_time">
<!-- 마감 카운트다운 -->
<div class="time">
<span class="tit">남은 시간</span>
<div id="dealCountdown" class="count" style="background:none;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var d = <?php echo $countdown; ?>;
var layout ='<span class="date"><span>{dn}</span><span class="hide">일</span></span>';
layout +='<div>';
layout +=' <span>{hnn}</span>';
layout +=' <span class="hide">시간</span>';
layout +='</div>';
layout +='<div>';
layout +=' <span>{mnn}</span>';
layout +=' <span class="hide">분</span>';
layout +='</div>';
layout +='<div>';
layout +=' <span>{snn}</span>';
layout +=' <span class="hide">초</span>';
layout +='</div>';
$('#dealCountdown').countdown({until: d, format: 'dHMS', labels:['','','','','','',''],layout:layout});
});
</script>
</div>
<? } ?>


skin/shop/basic/style.css 에 아래 내용 추가

.buy_time{text-align:right;width:100%;height:25px;margin:5px 0}
.buy_time .time{background: url('./img/countdown.png') top right no-repeat;float:right;width:300px;height:25px;position:relative}
.buy_time .time .tit{float:right;height:25px;line-height:25px;color:#666;margin-right:160px;font-weight:bold}
.buy_time .time .count{float:right;position:absolute;top:0;right:10px;height:25px}
.buy_time .time .count span{color:#fff;font-size:14px;font-family:Tahoma;font-weight:bold;height:25px;line-height:25px}
.buy_time .time .count .date{width:18px;float:left;margin-right:23px;padding-left:3px;line-height:25px;height:25px;text-align:right}
.buy_time .time .count div{float:left;width:31px;text-align:right}
.hide {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}


skin/shop/basic/img 폴더에 첨부된 png 파일 업로드



js 파일은 아래 url 다운받아 js 폴더에 업로드

http://keith-wood.name/js/jquery.plugin.js
http://keith-wood.name/js/jquery.countdown.js



* 모바일도 동일하게 적용합니다. 영카트4에도 적용 가능, 내용만 좀 수정해서요.