전역일계산기 html, css, 자바스크립트무료웹사이트도구 만들기

군대에 입대하기 전에 가장 먼저 찾아보는건 전역일이 언제인가? 를 찾아보게 됩니다. 이번 글에서는 전역일계산기를 자바스크립트를 이용해서 만들어보도록 하겠습니다.  이 계산기는 복무 시작일과 전역일을 자동으로 계산하여 복무 기간을 쉽게 관리할 수 있도록 도와줍니다. 이 글은 특히 프로그래밍에 관심 있는 분들에게 유용할 것입니다.

 

 

 

1. 전역일 계산기의 기능

이 전역일 계산기는 다음과 같은 기능을 제공합니다.

프로세스는 아래 구성도와 같습니다.

 

• 사용자로부터 복무 시작일을 입력받음
• 입력받은 날짜를 기준으로 전역일 계산
• 계산된 전역일과 남은 복무일수를 화면에 표시

 

2. HTML 구조 설정

1. 입력 필드와 버튼 생성

사용자로부터 복무 시작일을 입력받을 수 있는 텍스트 필드와 전역일을 계산하는 버튼을 만듭니다.

<label for="startDate">복무 시작일:</label>
<input type="date" id="startDate" name="startDate">
<button onclick="calculateDischargeDate()">전역일 계산하기</button>

 

2. 결과 출력을 위한 공간 마련

계산된 전역일과 남은 복무일수를 보여줄 공간을 마련합니다.

<div id="result"></div>

결과화면은 다음과 같이 나오게 됩니다.

 

3. JavaScript를 이용한 계산 로직 구현

전역일 계산 함수 작성

사용자가 입력한 복무 시작일을 기반으로 전역일을 계산하는 함수를 작성합니다.

function calculateDischargeDate() {
    var startDate = document.getElementById('startDate').value;
    var startDateObj = new Date(startDate);

    var serviceMonths = 18; // 육군 복무 기간;

    var dischargeDate = new Date(startDateObj.setMonth(startDateObj.getMonth() + serviceMonths));

    var today = new Date();
    var remainingDays = Math.ceil((dischargeDate - today) / (1000 * 60 * 60 * 24));

    // 날짜를 'YYYY. M. D.' 형식으로 포맷팅
    var formattedtoday = today.getFullYear() + '년 ' 
                       + (today.getMonth() + 1) + '월 ' 
                       + today.getDate() + '일';

    // 날짜를 'YYYY. M. D.' 형식으로 포맷팅
    var formattedDischargeDate = dischargeDate.getFullYear() + '년 ' 
                               + (dischargeDate.getMonth() + 1) + '월 ' 
                               + dischargeDate.getDate() + '일';

    document.getElementById('result').innerHTML = '오늘날짜: ' + formattedtoday + '<br>예상 전역일: ' + formattedDischargeDate + '<br>남은 복무일수: ' + remainingDays + '일';
}

 

3. 전체 HTML 코드

아래의 소스코드를 다운받아서 확인해보시면 됩니다.

전역일계산기.zip

0.00MB

 

전역일 계산기는 아래의 링크를 통해 보실 수 있습니다.

전역일 계산기 사이트 보러가기 ➔

 

결론

HTML과 JavaScript를 이용해서 전역일 계산기를 만들어보았습니다.

전역일 계산기는 사용자가 웹 페이지에서 간편하게 복무 기간을 계산할 수 있답니다.

전역일은 디데이이기도 하기 때문에 디데이 계산기로 변형 할 수도 있습니다.

이를 이용하면 디데이를 계산하는 간단한 무료웹사이트도구도 만들 수 있습니다.