<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜 간 일수 계산기</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
.input-group input[type="date"] {
width: calc(100% - 22px); /* Padding 고려 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin-top: 10px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>날짜 간 일수 계산기</h1>
<div class="input-group">
<label for="startDate">시작 날짜:</label>
<input type="date" id="startDate" value="2025-06-14"> </div>
<div class="input-group">
<label for="endDate">끝 날짜:</label>
<input type="date" id="endDate" value="2025-12-25"> </div>
<button onclick="calculateAndDisplayDays()">일수 계산</button>
<p id="result"></p>
</div>
<script>
/**
* 두 날짜 문자열 사이의 일수를 계산하는 함수
* @param {string} startDateString 'YYYY-MM-DD' 형식의 시작 날짜 문자열
* @param {string} endDateString 'YYYY-MM-DD' 형식의 끝 날짜 문자열
* @returns {number} 시작 날짜부터 끝 날짜까지의 일수. 유효하지 않은 날짜 또는 시작 날짜가 끝 날짜보다 늦을 경우 -1을 반환.
*/
function calculateDaysBetweenDates(startDateString, endDateString) {
const startDate = new Date(startDateString);
const endDate = new Date(endDateString);
// 시간을 자정으로 설정하여 날짜 계산의 정확성을 높입니다.
startDate.setHours(0, 0, 0, 0);
endDate.setHours(0, 0, 0, 0);
// 유효성 검사
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
console.error("유효하지 않은 날짜 형식입니다. 'YYYY-MM-DD' 형식을 사용해주세요.");
return -1;
}
// 시작 날짜가 끝 날짜보다 늦은 경우 (또는 같은 날)
if (startDate.getTime() > endDate.getTime()) {
console.warn("시작 날짜가 끝 날짜보다 늦거나 같습니다.");
// 같은 날의 경우 0일로 처리하고 싶으면 여기에 'return 0;' 추가
return -1; // 또는 0을 반환할 수도 있습니다.
}
// 두 날짜 간의 시간 차이 (밀리초)를 계산합니다.
const timeDifference = endDate.getTime() - startDate.getTime();
// 밀리초를 일수로 변환합니다. (1일 = 24시간 * 60분 * 60초 * 1000밀리초)
// Math.ceil을 사용하여 소수점 이하를 올림 처리하여, 하루가 채 안 되는 차이도 하루로 계산합니다.
// 만약 시작일과 종료일이 같은 날이면 0을 반환하려면 Math.floor나 Math.round를 고려해야 합니다.
// 여기서는 시작일 포함, 종료일 미포함 개념으로 일수를 계산하기 위해 Math.ceil을 사용합니다.
// 예를 들어, 2025-01-01부터 2025-01-02는 1일
const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
return daysDifference;
}
// HTML 요소와 상호작용하는 함수
function calculateAndDisplayDays() {
const startDateInput = document.getElementById('startDate').value;
const endDateInput = document.getElementById('endDate').value;
const resultElement = document.getElementById('result');
const days = calculateDaysBetweenDates(startDateInput, endDateInput);
if (days === -1) {
resultElement.textContent = "날짜를 올바르게 입력해주세요 (YYYY-MM-DD). 시작 날짜는 끝 날짜보다 이전이어야 합니다.";
resultElement.style.color = "red";
} else {
resultElement.textContent = `두 날짜 사이에는 ${days}일 남았습니다.`;
resultElement.style.color = "blue";
}
}
</script>
</body>
</html>
'FrontEnd > JavaScript' 카테고리의 다른 글
| koxo.com[javascript강좌] (0) | 2024.02.25 |
|---|---|
| String Methods (0) | 2023.10.09 |
| HTTP Status code (0) | 2023.10.09 |
| Array Methods (0) | 2023.10.09 |
| RegEX (0) | 2023.10.09 |
