날짜 계산기 스크립트
날짜 계산기 스크립트입니다. 이 스크립트는 두 날짜 사이의 차이를 일 단위로 계산하고, 그 결과를 출력하도록 하였답니다. 사용자는 원하는 날짜 형식을 입력할 수 있습니다. 이 스크립트는 다음과 같은 방식으로 작동하니, 필요에 따라 수정하여 사용해 주세요.
<!DOCTYPE html>
<html>
<head>
<style>
.container-beomsang {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.form-beomsang {
background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
input[type="text"],
input[type="date"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
input[type="text"] {
margin-bottom: 8px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
label[id^="days-"] {
display: block;
margin-top: 8px;
margin-bottom: 24px;
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="container-beomsang">
<h2>날짜 계산기</h2>
<form class="form-beomsang">
<label for="start-date-beomsang">시작 날짜</label>
<input type="date" max="9999-12-31" id="start-date-beomsang"><br><br>
<label for="end-date-beomsang">종료 날짜</label>
<input type="date" max="9999-12-31" id="end-date-beomsang"><br><br>
<button onclick="calculateDays(event)">날짜 차이 계산하기</button>
<label id="days-diff-beomsang">날짜를 입력해 주세요.</label>
<label for="additional-days-beomsang">시작 날짜로부터 며칠 이후</label>
<input type="text" id="additional-days-beomsang">
<button onclick="calculateDate(event)">날짜 며칠 이후 계산하기</button>
<label id="days-add-beomsang">날짜를 입력해 주세요.</label>
</form>
</div>
<script>
document.getElementById('start-date-beomsang').valueAsDate = new Date();
document.getElementById('end-date-beomsang').valueAsDate = new Date();
function calculateDays(event) {
event.preventDefault();
var startDateStr = document.getElementById("start-date-beomsang").value.replace(/-/g, '');
var endDateStr = document.getElementById("end-date-beomsang").value.replace(/-/g, '');
if (!validateDate(startDateStr) || !validateDate(endDateStr)) {
document.getElementById("days-diff-beomsang").textContent = "올바른 날짜 형식을 입력하세요.";
return;
}
var startDate = parseDate(startDateStr);
var endDate = parseDate(endDateStr);
var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
document.getElementById("days-diff-beomsang").textContent = "날짜 차이: " + daysDiff + "일";
}
function calculateDate(event) {
event.preventDefault();
var startDateStr = document.getElementById("start-date-beomsang").value.replace(/-/g, '');
var additionalDaysStr = document.getElementById("additional-days-beomsang").value.replace(/-/g, '');
if (!validateDate(startDateStr)) {
document.getElementById("days-add-beomsang").textContent = "올바른 날짜와 며칠을 입력하세요.";
return;
}
if (/^\d+$/.test(additionalDaysStr) && parseInt(additionalDaysStr) > 0) {
} else {
additionalDaysStr = 0;
}
var startDate = parseDate(startDateStr);
var additionalDays = parseInt(additionalDaysStr);
var resultDate = new Date(startDate);
resultDate.setDate(resultDate.getDate() + additionalDays);
var year = resultDate.getFullYear();
var month = resultDate.getMonth() + 1;
var day = resultDate.getDate();
var formattedDate = year + "년 " + month + "월 " + day + "일";
document.getElementById("days-add-beomsang").textContent = "시작 날짜로부터 " + additionalDays + "일 후: " + formattedDate;
}
function validateDate(dateStr) {
var dateRegex = /^\d{8}$/;
return dateRegex.test(dateStr);
}
function parseDate(dateStr) {
var year = dateStr.substr(0, 4);
var month = dateStr.substr(4, 2) - 1;
var day = dateStr.substr(6, 2);
return new Date(year, month, day);
}
</script>
</body>
</html><form class="form-beomsang">
<label for="start-date-beomsang">시작 날짜</label>
<input type="date" max="9999-12-31" id="start-date-beomsang"><br><br>
<label for="end-date-beomsang">종료 날짜</label>
<input type="date" max="9999-12-31" id="end-date-beomsang"><br><br>
<button onclick="calculateDays(event)">날짜 차이 계산하기</button>
<label id="days-diff-beomsang">날짜를 입력해 주세요.</label>
<label for="additional-days-beomsang">시작 날짜로부터 며칠 이후</label>
<input type="text" id="additional-days-beomsang">
<button onclick="calculateDate(event)">날짜 며칠 이후 계산하기</button>
<label id="days-add-beomsang">날짜를 입력해 주세요.</label>
</form>
<script>
document.getElementById('start-date-beomsang').valueAsDate = new Date();
document.getElementById('end-date-beomsang').valueAsDate = new Date();
function calculateDays(event) {
event.preventDefault();
var startDateStr = document.getElementById("start-date-beomsang").value.replace(/-/g, '');
var endDateStr = document.getElementById("end-date-beomsang").value.replace(/-/g, '');
if (!validateDate(startDateStr) || !validateDate(endDateStr)) {
document.getElementById("days-diff-beomsang").textContent = "올바른 날짜 형식을 입력하세요.";
return;
}
var startDate = parseDate(startDateStr);
var endDate = parseDate(endDateStr);
var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
document.getElementById("days-diff-beomsang").textContent = "날짜 차이: " + daysDiff + "일";
}
function calculateDate(event) {
event.preventDefault();
var startDateStr = document.getElementById("start-date-beomsang").value.replace(/-/g, '');
var additionalDaysStr = document.getElementById("additional-days-beomsang").value.replace(/[^-0-9]/g, '');
if (!validateDate(startDateStr)) {
document.getElementById("days-add-beomsang").textContent = "올바른 날짜와 며칠을 입력하세요.";
return;
}
if (!/^-?\d+$/.test(additionalDaysStr)) {
additionalDaysStr = 0;
}
var startDate = parseDate(startDateStr);
var additionalDays = parseInt(additionalDaysStr);
var resultDate = new Date(startDate);
resultDate.setDate(resultDate.getDate() + additionalDays);
var year = resultDate.getFullYear();
var month = resultDate.getMonth() + 1;
var day = resultDate.getDate();
var formattedDate = year + "년 " + month + "월 " + day + "일";
document.getElementById("days-add-beomsang").textContent = "시작 날짜로부터 " + additionalDays + "일 후: " + formattedDate;
}
function validateDate(dateStr) {
var dateRegex = /^\d{8}$/;
return dateRegex.test(dateStr);
}
function parseDate(dateStr) {
var year = dateStr.substr(0, 4);
var month = dateStr.substr(4, 2) - 1;
var day = dateStr.substr(6, 2);
return new Date(year, month, day);
}
</script>
<style>
.container-beomsang {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.form-beomsang {
background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
input[type="text"],
input[type="date"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
input[type="text"] {
margin-bottom: 8px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
label[id^="days-"] {
display: block;
margin-top: 8px;
margin-bottom: 24px;
color: #666;
font-style: italic;
}
</style>
댓글