묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
실시간으로 줄어드는 카운터 시계 구현에대한 질문
2003.01.21 11:27
옥션에 보면 실시간으로 시간을 줄어드는걸 볼수 있잖아여.
저도 그것을 구현해보고 싶은데..잘안되서 고수님들께 부탁드립니다.
디비에 저장된 시간을 불러와서 그시간이 실시간으로 줄어드는 방법을 쓰고 싶은데여..
여기저기 찾아보고 소스보고 해보고해도 안되네여.ㅠ.ㅠ
방법좀 알려주시면 감사드리겠습니다.
아래소스는 phpschool에서 가져온것인데 저가 해봤는데 안되네여..그냥 시간은 보여지는데 카운터가
안되고 있습니다.
소스 분석이 안되서...ㅠ.ㅠ 손을 못되겠네여
////php코드 시작///
$adate2[0] : 데이타 베이스의 timestamp형식으로 되어있는 값을 가지고 옵니다.
$date1=mktime($adate2[0],0,0,$adate[0],$adate[1],$adate1[0]); //end타임의 timestamp값
$date2=mktime();
$total_secs=abs($date1 - $date2);
$diff_in_days = floor($total_secs / 86400);
$rest_hours = $total_secs % 86400;
$diff_in_hours = floor($rest_hours / 3600);
$rest_mins = $rest_hours % 3600;
$diff_in_mins = floor($rest_mins / 60);
$diff_in_secs = floor($rest_mins % 60);
$time_diff = $diff_in_days ."일". $diff_in_hours ."시간". $diff_in_mins ."분". $diff_in_secs ."초";
//// php코드 끝 //////
// 자바스크립트 코드
<SCRIPT LANGUAGE='JavaScript'>
function Timer(diff_in_secs, diff_in_mins, diff_in_hours, diff_in_days)
{
//남은시간 실시간으로 보여지는 부분
day=diff_in_days; //일단 남은 날짜와 시간을 받아온다음에 timer1을 호출한다
hour=diff_in_hours;
min=diff_in_mins;
sec=diff_in_secs;
Timer1();
}
function Timer1()
{
sec=sec-1; //1초식 감소 하다가 -1이되면 1분을 뺀다은 초를 59초로 초기화
if(sec == -1)
{
sec = 59;
min = min-1;
}
if(min == -1) //1분씩 감소 하다가 -1이되면 1시간을 뺀다음 분을 59분으로 초기화
{
min=59;
hour = hour - 1;
}
if(hour == -1) //1시간씩 감소 하다가 -1이되면 1일을 뺀다음 날짜 초기화
{
hour = 23;
day = day - 1;
}
if(sec == 0 && min == 0 && hour == 0 && day == 0)
{
//일:0 시간:0 분:0 초:0 이라면 종료메세지 출력
document.timer.counter.value = '경매가 종료되었습니다.';
return;
}
document.timer.counter.value = day + '일 ' + hour + '시간 ' + min + '분 ' + sec + '초 ';
//1초당 한번씩 timer1()을 호출하여 실행
window.setTimeout('Timer1()',1000);
}
</SCRIPT>
// body 부분 아래와 적어준다.
<body onload='Timer($diff_in_secs, $diff_in_mins, $diff_in_hours, $diff_in_days)' > <!-- 페이지 로드시 남은 기간값을 timer()에게 던진다. -->
////스크립트 종료 /////
저도 그것을 구현해보고 싶은데..잘안되서 고수님들께 부탁드립니다.
디비에 저장된 시간을 불러와서 그시간이 실시간으로 줄어드는 방법을 쓰고 싶은데여..
여기저기 찾아보고 소스보고 해보고해도 안되네여.ㅠ.ㅠ
방법좀 알려주시면 감사드리겠습니다.
아래소스는 phpschool에서 가져온것인데 저가 해봤는데 안되네여..그냥 시간은 보여지는데 카운터가
안되고 있습니다.
소스 분석이 안되서...ㅠ.ㅠ 손을 못되겠네여
////php코드 시작///
$adate2[0] : 데이타 베이스의 timestamp형식으로 되어있는 값을 가지고 옵니다.
$date1=mktime($adate2[0],0,0,$adate[0],$adate[1],$adate1[0]); //end타임의 timestamp값
$date2=mktime();
$total_secs=abs($date1 - $date2);
$diff_in_days = floor($total_secs / 86400);
$rest_hours = $total_secs % 86400;
$diff_in_hours = floor($rest_hours / 3600);
$rest_mins = $rest_hours % 3600;
$diff_in_mins = floor($rest_mins / 60);
$diff_in_secs = floor($rest_mins % 60);
$time_diff = $diff_in_days ."일". $diff_in_hours ."시간". $diff_in_mins ."분". $diff_in_secs ."초";
//// php코드 끝 //////
// 자바스크립트 코드
<SCRIPT LANGUAGE='JavaScript'>
function Timer(diff_in_secs, diff_in_mins, diff_in_hours, diff_in_days)
{
//남은시간 실시간으로 보여지는 부분
day=diff_in_days; //일단 남은 날짜와 시간을 받아온다음에 timer1을 호출한다
hour=diff_in_hours;
min=diff_in_mins;
sec=diff_in_secs;
Timer1();
}
function Timer1()
{
sec=sec-1; //1초식 감소 하다가 -1이되면 1분을 뺀다은 초를 59초로 초기화
if(sec == -1)
{
sec = 59;
min = min-1;
}
if(min == -1) //1분씩 감소 하다가 -1이되면 1시간을 뺀다음 분을 59분으로 초기화
{
min=59;
hour = hour - 1;
}
if(hour == -1) //1시간씩 감소 하다가 -1이되면 1일을 뺀다음 날짜 초기화
{
hour = 23;
day = day - 1;
}
if(sec == 0 && min == 0 && hour == 0 && day == 0)
{
//일:0 시간:0 분:0 초:0 이라면 종료메세지 출력
document.timer.counter.value = '경매가 종료되었습니다.';
return;
}
document.timer.counter.value = day + '일 ' + hour + '시간 ' + min + '분 ' + sec + '초 ';
//1초당 한번씩 timer1()을 호출하여 실행
window.setTimeout('Timer1()',1000);
}
</SCRIPT>
// body 부분 아래와 적어준다.
<body onload='Timer($diff_in_secs, $diff_in_mins, $diff_in_hours, $diff_in_days)' > <!-- 페이지 로드시 남은 기간값을 timer()에게 던진다. -->
////스크립트 종료 /////
댓글 3
-
세상
2003.01.21 13:06
-
바다~♡
2003.01.21 14:56
잘되나여.? 저는 그냥 시간만 찍히고 시간이 카운터가 안되는뎅..
물론 새로고침을 하면 시간이 가긴 가더군여..
세상님은 실시간으로 시간이줄어드나여.? -
바다~♡
2003.01.21 15:04
아 된다..ㅠ.ㅠ
저가 바보가 된기분..ㅋㅋㅋㅋ
<body onload='Timer($diff_in_secs, $diff_in_mins, $diff_in_hours, $diff_in_days)' >
이구분을 그냥 써서 안됐네여....<? echo로 찍었어야 하는데.^^ 암튼 감사합니다.
위 소스만으로는 출력 부분이 없네요..
<body>밑에..
<form name=timer>
<input name=counter>
</form>
으로 테스트결과..잘 작동하네요 @_@