메뉴 건너뛰기

조회 수 8801 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

D-day 계산이 필요하여 간단하게 짜 보았습니다.


jquery 로 되어 있으며 시분초까지 출력하도록 하였습니다.


아래와 같은 화면으로 되어 있습니다. (입력받는 숫자의 날짜 검증은 빠져있고 단순 계산만 작성하였습니다.)



[소스]


<!doctype html>
<html lang="kr">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
     
    $(document).ready( function() {
     
        setViewTime = function (){ //함수로 만들어 준다.
         
            //아래 부분 입력창에서 가져오지 않고 그냥 셋팅해도 된다.
            var getYear = $("#year").val();
            var getMonth = $("#month").val();
            var getDay = $("#day").val();
             
            if(getYear.trim() != "" && getMonth.trim() != "" && getDay.trim() != ""){
             
                var dat1 = new Date(); //현재날짜
                var dat2 = new Date(getYear, getMonth-1, getDay); //월에서 1 빼줘야 함
             
                var diff = dat2 - dat1; //날짜 빼기
                 
                var currSec = 1000; // 밀리세컨
                var currMin = 60 * 1000; // 초 * 밀리세컨
                var currHour = 60 * 60 * 1000; // 분 * 초 * 밀리세컨
                var currDay = 24 * 60 * 60 * 1000; // 시 * 분 * 초 * 밀리세컨
                 
                var day = parseInt(diff/currDay); //d-day 일
                var hour = parseInt(diff/currHour); //d-day 시
                var min = parseInt(diff/currMin); //d-day 분
                var sec = parseInt(diff/currSec); //d-day 초
                 
                var viewHour = hour-(day*24);
                var viewMin = min-(hour*60);
                var viewSec = sec-(min*60);
                 
                //시분초 말고 일까지만 보여주면 day만 노출하면 된다.
                var viewStr = day+"일 "+viewHour+"시 "+viewMin+"분 "+viewSec+"초";
                 
                $("#dateView").html("<span style='font-size: 13pt;'><b>"+viewStr+"</b></span>");
                 
            }else{
             
                $("#dateView").html("<span style='font-size: 13pt;'><b>입력창에 날짜를 입력하세요.</b></span>");
                 
            }
  
        }
         
        setInterval('setViewTime()',1000);
         
    });
       
  </script>
</head>
<body>
    <br>
    <input type="text" id="year" placeholder="년도를 입력하세요."/> - <input type="text" id="month" placeholder="월을 입력하세요."/> - <input type="text" id="day" placeholder="일을 입력하세요."/>
    <br>
    <br>
    <span style='font-size: 13pt;'><b>D-Day: </b></span><span id="dateView"/>
</body>
</html>



[실행]


아래 입력창에 년월일을 넣어보세요.

=======================================================================

demo
- -

D-Day: 입력창에 날짜를 입력하세요.


List of Articles
번호 제목 날짜 조회 수
119 jquery 팝업 차단 없이 띄우기 2019.03.05 2855
118 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1129
117 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
116 jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경) 2019.01.16 1502
115 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1261
114 jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1181
113 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1054
112 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1119
111 jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery) file 2019.01.16 1409
110 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
109 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3224
108 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2191
107 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1321
106 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1349
105 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
104 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 961
103 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1233
102 jQuery Plugin : Slider file 2019.01.10 1113
101 jQuery datepicker 팝업창 사이즈 바꾸기 file 2019.01.10 1495
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved