시간 카운트다운 자바 스크립트 질문 드립니다
시간 카운트다운 자바 스크립트에서 남은 시간이 00시 00분 00초가 되었을때
시간 숫자 부분을 없애고 '남은 시간이 없습니다' 메시지를 나타나게 하려면 어떻게 해야할까요??
소스 1에 주황색으로 표시된 부분을 소스 2에 맞게 변형하여 적용하고 싶습니다
소스1
////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()에게 던진다. -->
////스크립트 종료 /////
소스2
위에 주황색 부분으로 표시된 내용을 아래의 소스에 맞게 변형을 어떻게 해야하는지 꼭 알고싶습니다 부탁드려요
(function($){
config = {};
$.extend(config, options);
diffSecs = this.setCountDown(config);
if (config.onComplete)
{
$.data($(this)[0], 'callback', config.onComplete);
}
if (config.omitWeeks)
{
$.data($(this)[0], 'omitWeeks', config.omitWeeks);
}
$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
$(this).doCountDown($(this).attr('id'), diffSecs, 500);
return this;
};
$.fn.stopCountDown = function () {
clearTimeout($.data(this[0], 'timer'));
};
$.fn.startCountDown = function () {
this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
};
$.fn.setCountDown = function (options) {
var targetTime = new Date();
if (options.targetDate)
{
targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
}
else if (options.targetOffset)
{
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
var nowTime = new Date();
diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
$.data(this[0], 'diffSecs', diffSecs);
return diffSecs;
};
$.fn.doCountDown = function (id, diffSecs, duration) {
$this = $('#' + id);
if (diffSecs <= 0)
{
diffSecs = 0;
if ($.data($this[0], 'timer'))
{
clearTimeout($.data($this[0], 'timer'));
}
}
secs = diffSecs % 60;
mins = Math.floor(diffSecs/60)%60;
hours = Math.floor(diffSecs/60/60)%24;
if ($.data($this[0], 'omitWeeks') == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%7;
weeks = Math.floor(diffSecs/60/60/24/7);
}
$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
$.data($this[0], 'diffSecs', diffSecs);
if (diffSecs > 0)
{
e = $this;
t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
$.data(e[0], 'timer', t);
}
else if (cb = $.data($this[0], 'callback'))
{
$.data($this[0], 'callback')();
}
};
$.fn.dashChangeTo = function(id, dash, n, duration) {
$this = $('#' + id);
for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
{
var d = n%10;
n = (n - d) / 10;
$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
}
};
$.fn.digitChangeTo = function (digit, n, duration) {
if (!duration)
{
duration = 800;
}
if ($(digit + ' div.top').html() != n + '')
{
$(digit + ' div.top').css({'display': 'none'});
$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
$(digit + ' div.bottom').html($(digit + ' div.top').html());
$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
$(digit + ' div.top').hide().slideUp(10);
});
}
};
})(jQuery);
답변 1개
document.timer.counter.value = day + '일 ' + hour + '시간 ' + min + '분 ' + sec + '초 ';
//1초당 한번씩 timer1()을 호출하여 실행
window.setTimeout('Timer1()',1000);
이부분을 if로 감싸면 되겠는데요
if(day == 0 && hour == 0 && ~~~~~~~~~~~~~~)
{
document.timer.counter.value = day + '일 ' + hour + '시간 ' + min + '분 ' + sec + '초 ';
//1초당 한번씩 timer1()을 호출하여 실행
window.setTimeout('Timer1()',1000);}
else
document.timer.counter.value = "시간종료";
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인