그누보드 - 경매사이트 등에서 남은시간 이미지로 표시하기

경매사이트 등에서 남은시간 이미지로 표시하기 정보

경매사이트 등에서 남은시간 이미지로 표시하기

첨부파일

time_left.zip (8.7K) 117회 다운로드 2011-10-20 21:32:33

본문

필요해서 여기저기 참고해서 만들어봤습니다.

모든 숫자들을 하나의 이미지 파일에 넣어 필요한 숫자부분만을 골라서 표시하도록 만들었습니다.

깜박거림 없이 잘 돌아갑니다. 글씨들이 좀 크면 이미지 새로 만들고 background image 불러오는 부분 가로수치들 바꿔줘야 합니다.

배워가며 만든거라 필요없는 부분도 있을 듯 싶고, 코드도 단축될 수 있을지도 모르겠네요.

응용해서 변형하면 쓸만한 소스가 될 듯 합니다.

저는 남은 시간이 1일 이상이면 남은 일수만 보이고,

1일 미만이면 시간만,

1시간 미만이면 분과 초만,

1분 미만이면 초만 보이게 만들어 적용하고 있습니다.

-------------------------------------------

numbers.png 파일은 그누보드 메인 img 폴더에 넣습니다.

left_time.php는 그누보드 메인에 넣었으면

<? include("$g4[path]/left_time.php") ?>

이렇게 불러오던지 아님 그냥 필요한 페이지에 전체 복사해서 넣으셔도 됩니다.

남은 일수는 99일(2자리수)까지만 출력합니다. 더 필요하시면 '일'부분에 100단위 추가하도록 스크립트 추가하셔야 합니다.

남은시간이 없으면'종료'표시 됩니다.

-------------------------------------------

left_time.php 중 $target_time 에 원하는 종료시간을 정해주셔야 합니다.

<?
$target_time = '11-12-20 23:59:59'; // 종료시간 설정 $target_time = $view[wr_1] 등으로 수정
$left_time = (int)(strtotime($target_time) - $g4['server_time']);
?>

timeLeft = (timeLeft <= 0) ? 0 : -- timeLeft;

if (timeLeft >= 1) {

  var days = Math.floor(timeLeft / 86400);
  var hours = Math.floor((timeLeft - 86400 * days) / 3600);
  var minutes = Math.floor((timeLeft - (86400 * days) - (3600 * hours)) / 60);
  var seconds = timeLeft % 60;
  var bg_prefix = "<div style=\"width:19px;height:40px;background:url('<?=$g4[path]?>/img/numbers.png') no-repeat scroll ";
  var bg_suffix = "px 0px transparent;\"></div>";

  $('#td1').html(bg_prefix + (-(Math.floor((days % 100) / 10))*19) + bg_suffix);
  $('#td2').html(bg_prefix + (-(days % 10)*19) + bg_suffix);
  $('#th1').html(bg_prefix + (-(Math.floor((hours % 100) / 10))*19) + bg_suffix);
  $('#th2').html(bg_prefix + (-(hours % 10)*19) + bg_suffix);
  $('#tm1').html(bg_prefix + (-(Math.floor(minutes / 10))*19) + bg_suffix);
  $('#tm2').html(bg_prefix + (-(minutes % 10)*19) + bg_suffix);
  $('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*19) + bg_suffix);
  $('#ts2').html(bg_prefix + (-(seconds % 10)*19) + bg_suffix);
  $('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*19) + bg_suffix);
  $('#ts2').html(bg_prefix + (-(seconds % 10)*19) + bg_suffix);
  $('#left_time').show();
  } else {
  $('#time_end').show();
  $('#left_time').hide();
  }

}

updateLeftTime();
setInterval(updateLeftTime, 1000);

});
-->
</script>