728x90
반응형
function remaindTime() {
var now = new Date(); //현재시간을 구한다.
var end = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,00,00);
//오늘날짜의 저녁 9시 - 종료시간기준
var open = new Date(now.getFullYear(),now.getMonth(),now.getDate(),09,00,00);
//오늘날짜의 오전9시 - 오픈시간기준
var nt = now.getTime(); // 현재의 시간만 가져온다
var ot = open.getTime(); // 오픈시간만 가져온다
var et = end.getTime(); // 종료시간만 가져온다.
if(nt<ot){ //현재시간이 오픈시간보다 이르면 오픈시간까지의 남은 시간을 구한다.
$(".time").fadeIn();
$("p.time-title").html("금일 오픈까지 남은 시간");
sec =parseInt(ot - nt) / 1000;
day = parseInt(sec/60/60/24);
sec = (sec - (day * 60 * 60 * 24));
hour = parseInt(sec/60/60);
sec = (sec - (hour*60*60));
min = parseInt(sec/60);
sec = parseInt(sec-(min*60));
if(hour<10){hour="0"+hour;}
if(min<10){min="0"+min;}
if(sec<10){sec="0"+sec;}
$(".hours").html(hour);
$(".minutes").html(min);
$(".seconds").html(sec);
} else if(nt>et){ //현재시간이 종료시간보다 크면
$("p.time-title").html("금일 마감");
$(".time").fadeOut();
}else { //현재시간이 오픈시간보다 늦고 마감시간보다 이르면 마감시간까지 남은 시간을 구한다.
$(".time").fadeIn();
$("p.time-title").html("금일 마감까지 남은 시간");
sec =parseInt(et - nt) / 1000;
day = parseInt(sec/60/60/24);
sec = (sec - (day * 60 * 60 * 24));
hour = parseInt(sec/60/60);
sec = (sec - (hour*60*60));
min = parseInt(sec/60);
sec = parseInt(sec-(min*60));
if(hour<10){hour="0"+hour;}
if(min<10){min="0"+min;}
if(sec<10){sec="0"+sec;}
$(".hours").html(hour);
$(".minutes").html(min);
$(".seconds").html(sec);
}
}
setInterval(remaindTime,1000); //1초마다 검사를 해주면 실시간으로 시간을 알 수 있다.
728x90
반응형
'javascript > jQuery' 카테고리의 다른 글
[JAVASCRIPT/JQUERY] 그리드정렬 masonry 플러그인 높이가 다른 이미지 정렬하기(옵션값설정) (0) | 2019.04.15 |
---|---|
[JAVASCRIPT/JQUERY] jqueryUI effect 사용하기 (0) | 2019.04.15 |
[JAVASCRIPT/JQUERY]스크롤 이벤트를 이용한 header 만들기 (403) | 2019.04.11 |
[JAVASCRIPT/JQUERY]플러그인 쓰지않고 이미지 슬라이드 만들기 (0) | 2019.04.11 |
[JAVASCRIPT/JQUERY]서브페이지에 사이트 이동경로를 나타내는 방법 (select) (0) | 2019.04.10 |
댓글