남은시간 이미지로 표시(역카운트) 정보
남은시간 이미지로 표시(역카운트)
본문
안녕하세요........아래 코드는 남은시간을 이미지로 표기해주는 역카운트 소스입니다.
보통 본문에 사용을 하는데 이걸 리스트에 사용할려니 for문에 변수들이 중복으로 섞여서 출력이 안되더라구요.
중복되는 변수명만 중복안되게 찝어주시면 감사하겠습니다 (__);;;;
----------------------------------------------------------------------
<?
$target_time = $product[pr_sdate]; // 종료시간 설정 $target_time = $view[wr_1] 등으로 수정
$left_time = (int)(strtotime($target_time) - $g4['server_time']);
?>
<script type="text/javascript">
<!--
$(document).ready(function() {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(ignored) {
}
// 남은시간 갱신
var timeLeft = <?=$left_time?>;
var updateLeftTime = function() {
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:23px;height:32px;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))*23) + bg_suffix);
$('#td2').html(bg_prefix + (-(days % 10)*23) + bg_suffix);
$('#th1').html(bg_prefix + (-(Math.floor((hours % 100) / 10))*23) + bg_suffix);
$('#th2').html(bg_prefix + (-(hours % 10)*23) + bg_suffix);
$('#tm1').html(bg_prefix + (-(Math.floor(minutes / 10))*23) + bg_suffix);
$('#tm2').html(bg_prefix + (-(minutes % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#left_time').show();
} else {
$('#time_end').show();
$('#left_time').hide();
}
}
updateLeftTime();
setInterval(updateLeftTime, 1000);
});
-->
</script>
<style type="text/css">
.time{position:relative;}
.time .hms{position:absolute}
.time .hms:after{display:block;clear:both;content:''}
.time .hms span{float:left}
.time .hms .timer{width:23px;height:32px;}
.time .hms .timer_day{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -229px 0px transparent;}
.time .hms .timer_hour{width:29px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -246px 0px transparent;}
.time .hms .timer_min{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -276px 0px transparent;}
.time .hms .timer_sec{width:17px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -293px 0px transparent;}
.time .hms .timer_end{width:29px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -310px 0px transparent;}
</style>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="margin-left:8px;">
<tr>
<td height="19" valign="top">
<!-- 남은시간 시작 -->
<div id="left_time" class="time">
<div class="hms">
<span id="td1" class="timer"></span>
<span id="td2" class="timer"></span>
<span id="td" class="timer_day"></span>
<span id="th1" class="timer"></span>
<span id="th2" class="timer"></span>
<span id="th" class="timer_hour"></span>
<span id="tm1" class="timer"></span>
<span id="tm2" class="timer"></span>
<span id="tm" class="timer_min"></span>
<span id="ts1" class="timer"></span>
<span id="ts2" class="timer"></span>
<span id="ts" class="timer_sec"></span>
</div>
</div>
<!-- 남은시간 끝 -->
<!-- 종료시 시작 -->
<div id="time_end" class="time" style="display:none">
<div class="hms">
<span class="timer_end"></span>
</div>
</div>
<!-- 종료시 끝 -->
</td>
</tr>
</table>
--------------------------------------------------------------------------------------
보통 본문에 사용을 하는데 이걸 리스트에 사용할려니 for문에 변수들이 중복으로 섞여서 출력이 안되더라구요.
중복되는 변수명만 중복안되게 찝어주시면 감사하겠습니다 (__);;;;
----------------------------------------------------------------------
<?
$target_time = $product[pr_sdate]; // 종료시간 설정 $target_time = $view[wr_1] 등으로 수정
$left_time = (int)(strtotime($target_time) - $g4['server_time']);
?>
<script type="text/javascript">
<!--
$(document).ready(function() {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(ignored) {
}
// 남은시간 갱신
var timeLeft = <?=$left_time?>;
var updateLeftTime = function() {
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:23px;height:32px;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))*23) + bg_suffix);
$('#td2').html(bg_prefix + (-(days % 10)*23) + bg_suffix);
$('#th1').html(bg_prefix + (-(Math.floor((hours % 100) / 10))*23) + bg_suffix);
$('#th2').html(bg_prefix + (-(hours % 10)*23) + bg_suffix);
$('#tm1').html(bg_prefix + (-(Math.floor(minutes / 10))*23) + bg_suffix);
$('#tm2').html(bg_prefix + (-(minutes % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#left_time').show();
} else {
$('#time_end').show();
$('#left_time').hide();
}
}
updateLeftTime();
setInterval(updateLeftTime, 1000);
});
-->
</script>
<style type="text/css">
.time{position:relative;}
.time .hms{position:absolute}
.time .hms:after{display:block;clear:both;content:''}
.time .hms span{float:left}
.time .hms .timer{width:23px;height:32px;}
.time .hms .timer_day{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -229px 0px transparent;}
.time .hms .timer_hour{width:29px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -246px 0px transparent;}
.time .hms .timer_min{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -276px 0px transparent;}
.time .hms .timer_sec{width:17px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -293px 0px transparent;}
.time .hms .timer_end{width:29px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -310px 0px transparent;}
</style>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="margin-left:8px;">
<tr>
<td height="19" valign="top">
<!-- 남은시간 시작 -->
<div id="left_time" class="time">
<div class="hms">
<span id="td1" class="timer"></span>
<span id="td2" class="timer"></span>
<span id="td" class="timer_day"></span>
<span id="th1" class="timer"></span>
<span id="th2" class="timer"></span>
<span id="th" class="timer_hour"></span>
<span id="tm1" class="timer"></span>
<span id="tm2" class="timer"></span>
<span id="tm" class="timer_min"></span>
<span id="ts1" class="timer"></span>
<span id="ts2" class="timer"></span>
<span id="ts" class="timer_sec"></span>
</div>
</div>
<!-- 남은시간 끝 -->
<!-- 종료시 시작 -->
<div id="time_end" class="time" style="display:none">
<div class="hms">
<span class="timer_end"></span>
</div>
</div>
<!-- 종료시 끝 -->
</td>
</tr>
</table>
--------------------------------------------------------------------------------------
댓글 전체