남은시간 표시하기 > 영카트5 팁자료실

영카트5 팁자료실

남은시간 표시하기 정보

남은시간 표시하기

본문

소셜쇼핑 등에 있는 남은시간 표시하기
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에도 적용 가능, 내용만 좀 수정해서요.
추천9

댓글 전체

위 내용중 검은 바탕의 이미지입니다. 소셜쇼핑 등에 있는 남은시간 표시하기 바로 위 이미지...
http://bikedb.co.kr/ver2/skin/shop/basic/img/countdown.png
답변감사드립니다.
여분필드를 이용할려고 하는건 각기 다른 시간들 때문에 그렇게 할려고 하거든요.
$endtime = it_1 이런식으로요.. 근데 잘 되질 않아서요.
// 판매 가능하고 재고가 있으며 품절이 아닐때, 종료시간 전일때
if ( $it[it_use] && !$it[it_soldout] && $it[it_stock_qty] > 0 && $endtime>time()) ) {

저는 이 라인에 구문 오류가 뜨네요..ㄷㄷ
전체 15
영카트5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 강정 감귤 5kg 한박스

    참여27 회 시작18.11.13 20:00 종료18.11.18 20:00
  2. 다래사랑) 레드키위 or 골드키위 3Kg 한박스

    참여27 회 시작18.11.13 11:45 종료18.11.18 11:45

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT