자바스크립트 타이머가 새로고침하면 초기화가되버리는데요
본문
<script language="javascript">
$(document).ready(function(a){
//초기값
var hour = 14;
var minute = 0;
var second = 0;
// 초기화
//$(".countTimeHour").html(hour);
//$(".countTimeMinute").html(minute);
//$(".countTimeSecond").html(second);
var timer = setInterval(function (a) {
// 설정
$(".countTimeHour").html(hour);
$(".countTimeMinute").html(minute);
$(".countTimeSecond").html(second);
if(second == 0 && minute == 0 && hour == 0){
alert('타이머 종료.');
clearInterval(timer); /* 타이머 종료 */
}else{
second--;
// 분처리
if(second < 0){
minute--;
second = 59;
}
//시간처리
if(minute < 0){
if(hour > 0){
hour--;
minute = 59;
}
}
}
}, 1000); /* millisecond 단위의 인터벌 */
});
</script>
새로고침이나 페이지다시접속시 타이머가 초기화가되버리네요;;
데 어떻게해야할지... 도움좀부탁드립니다
답변 4
레이아웃을 프레임으로 구성하는 방법도 있습니다.
보이지 않는 프레임에 자바스크립트를 돌려놓고 f5같은 새로고침 버튼을 누르면 내용이 있는 프레임만 새로 고침을 한다거나...참고만 해주세요.^^
일단 그누보드5의 경우는 html5 버전이고요. html5 버전은 원칙적으로 프레임을 지원하지 않습니다.
그리고 웹브라우저 자체의 새로고침을 하게되면 프레임셋 전체가 새로고침이 되기 때문에 보이지 않는 프레임이라고 하더라도 별다른 효용이 없다고 보여집니다.
자바스크립트만으로 타이머를 제작하게 되면 페이지가 실행될때만 구동이 되므로 새로고침하게 되면 당연히 초기값으로 설정될 수 밖에 없을 겁니다.
이런 경우에 서버의 시간을 php로 가져와서 이 부분을 자바스크립트의 setInterval()을 이용해서 구성하는 방식으로 프로그램을 만들어 보세요.
http://blog.naver.com/thanksyo/140199493515
여기 참고해 보시면 좋을 듯 합니다.
이경우는 몇가지 경우로 작업을 하는데요.
만일 불특정 접속자마다 다 다른 실시간 초기화를 원하시는경우와
옥션의 카운터처럼 어느누가 들어와도 동일한 타이머가 필요한경우...방식이 달라지리라 생각합니다.
접속자마다..일경우 쿠키나 세션을 사용하시면 될거구요.
옥션타이머같은 동일한 카운터를 원하시면..ajax를 통해서 db로 저장하는게 그나마 구현하기 쉬울겁니다.
일단 접속자마다 다르다는 가정에서는
/js/common.js 에 쿠키관련 함수가 있습니다. get_cookie/set_cookie 있지요.
좀 테스트를 해보아야겠지만 대략 저라면..
var s_hour,s_minute,s_second;
....
....
$(".countTimeHour").html(hour);
$(".countTimeMinute").html(minute);
$(".countTimeSecond").html(second);
set_cookie(s_hour,hour,'','');
set_cookie(s_minute,minute,'','');
set_cookie(s_second,second,'','');
해서...저장을 해보겠습니다..
그리고
if(!hour)hour=get_cookie(s_hour);
if(!minute)minute=get_cookie(s_minute);
if(!second)second=get_cookie(s_second);
이런방식으로 새로고침시에 초기화되었을경우 저장된 쿠키값을 가져오는방식으로
처리를 해보지 않았을까 생각합니다.
질문을 보면서 막생각해서 적다보니...테스트는 좀해보셔야할겁니다만.
여튼 참고만하십시요.^^
세션으로 저장하는 것도 괜찮겠네요.
접속해서 스타트 시간을 세션에 저장해 놓고 새로 고침 하면 다시 불러와서 현재 시간이랑 빼서 흐른시간만큼 적용시키면 될 것 같네요.
