사용 시간 자동 계산
본문
안녕하세요.
사용 시간을 자동 계산해서 표시해 주고 그 값을 특정 테이블에 입력할려고 합니다.
그런데 여러가지 방법을 사용해 봤는데 잘 안되네요.
고수님들의 조언 부탁드립니다.
감사합니다.
<table class="qa_05">
<thead>
<tr>
<th class="qa_05-a01" colspan="2"><span style="font-size: 17px; font-weight: bold; ">사용 시간</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="qa_05-a02">• 시작 시각</span></td>
<td class="qa_05-a02"><input type="time" id="mb_start_time" name="mbstart_time" required></td>
</tr>
<tr>
<td class="qa_05-a02">• 끝낸 시각</span></td>
<td class="qa_05-a02"><input type="time" id="mb_end_time" name="mb_end_time" required></td>
</tr>
</tbody>
// 이 부분에 끝낸 시각을 입력과 동시에 사용 시간 자동 계산해서 표시되고 이 값을 특정 테이블에 입력
</table>
끝낸 시각을 입력과 동시에 사용 시간 자동 계산해서 "시간:분" 형식으로 표시되고 이 값을 특정 테이블에 입력하게 할려고 합니다.
그리고, 시작 시각이 늦은 밤이고 끝낸 시각이 그 다음 날일 경우도 있습니다.
이렇때도 자동 계산 되게 할려고 합니다.
조언 부탁드립니다.
감사합니다.
답변 4
질문의 내용을 토대로 예제를 만들어 본다면 다음과 같이 할 수 있을 것 같습니다.
<table class="qa_05">
<thead>
<tr>
<th class="qa_05-a01" colspan="2"><span style="font-size: 17px; font-weight: bold;">사용 시간</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="qa_05-a02">• 시작 시각</td>
<td class="qa_05-a02"><input type="time" id="mb_start_time" name="mbstart_time" required></td>
</tr>
<tr>
<td class="qa_05-a02">• 끝낸 시각</td>
<td class="qa_05-a02"><input type="time" id="mb_end_time" name="mb_end_time" required onchange="calculateTimeDifference()"></td>
</tr>
</tbody>
</table>
<!-- 추가한 부분: 사용 시간 표시를 위한 <div> -->
<div id="usage_time_display"></div>
<script>
function calculateTimeDifference() {
// 입력한 시작 시각과 끝낸 시각 가져오기
const startTimeInput = document.getElementById("mb_start_time");
const endTimeInput = document.getElementById("mb_end_time");
const startTime = startTimeInput.value;
const endTime = endTimeInput.value;
// 시작 시각과 끝낸 시각을 Date 객체로 변환
const startDateTime = new Date("2023-07-01T" + startTime);
const endDateTime = new Date("2023-07-01T" + endTime);
// 끝낸 시각이 시작 시각보다 이전인 경우(다음 날로 넘어갔을 경우) 날짜를 하루 증가
if (endDateTime < startDateTime) {
endDateTime.setDate(endDateTime.getDate() + 1);
}
// 사용 시간 계산
const timeDiff = endDateTime - startDateTime;
const hours = Math.floor(timeDiff / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
// 사용 시간을 "시간:분" 형식으로 표시하여 출력
const usageTimeDisplay = document.getElementById("usage_time_display");
usageTimeDisplay.textContent = `${hours}시간 ${minutes}분`;
// 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)
}
</script>
calculateTimeDifference() 함수가 사용 시간을 계산하고, 계산 결과를 "시간:분" 형식으로 표시하고 onchange 이벤트를 사용하여 끝낸 시각 입력창의 값이 변경될 때마다 이 함수가 호출되도록 합니다.
그러면 끝낸 시각을 입력하면 사용 시간이 자동으로 계산되어 화면에 표시되고, 사용 시간을 특정 테이블에 입력하는 로직은 서버로 전송하거나 원하는 방식으로 추가하시면 될것 같습니다.
답변 정말 감사드립니다. 꾸벅.
말씀하신데로 해보았는데 이렇게 나타나네요.
뭐가 문제일까요?
이미지가 안들어가서 문자로만 표시하면
"NaN시간 NaN"
이렇게 나타납니다.
댓글쓰기에는 이미지가 안들어가서 위 부분에 willfor716 으로 답변 작성하여 다시 설명 드렸습니다.
너무나 죄송하고 감사하지만...
추가 조언 부탁드립니다.
감사합니다.
로직을 어떤식으로 작성하셨는지 정확히 모르기 때문에 구체적인 답변을 드리기는 어려울 것 같습니다.
끝낸 시각을 Date 객체로 변환할 때, 날짜를 동적으로 설정해주기 위해
const currentDate = new Date().toISOString().split('T')[0];를 사용하여 현재 날짜를 YYYY-MM-DD 형식으로 가져오게 수정하였으며,
startDateTime과 endDateTime을 설정할 때, 현재 날짜를 포함하여 끝낸 시각이 시작 시각보다 이전인지 체크할 수 있도록 수정해봤습니다
참고하셔서 원하시는 로직으로 구현하시면 될 것 같습니다.
<!-- ... (기존 코드) ... -->
<script>
function calculateTimeDifference() {
// 입력한 시작 시각과 끝낸 시각 가져오기
const startTimeInput = document.getElementById("mb_start_time");
const endTimeInput = document.getElementById("mb_end_time");
const startTime = startTimeInput.value;
const endTime = endTimeInput.value;
// 현재 날짜 가져오기 (YYYY-MM-DD 형식으로)
const currentDate = new Date().toISOString().split('T')[0];
// 시작 시각과 끝낸 시각을 Date 객체로 변환 (현재 날짜를 포함해서 설정)
const startDateTime = new Date(currentDate + "T" + startTime);
const endDateTime = new Date(currentDate + "T" + endTime);
// 끝낸 시각이 시작 시각보다 이전인 경우(다음 날로 넘어갔을 경우) 날짜를 하루 증가
if (endDateTime < startDateTime) {
endDateTime.setDate(endDateTime.getDate() + 1);
}
// 사용 시간 계산
const timeDiff = endDateTime - startDateTime;
const hours = Math.floor(timeDiff / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
// 사용 시간을 "시간:분" 형식으로 표시하여 출력
const usageTimeDisplay = document.getElementById("usage_time_display");
usageTimeDisplay.textContent = `${hours}시간 ${minutes}분`;
// 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)
}
</script>
시작, 종료에 대한 DB Table 컬럼 생성
시작, 종료 발생시 각각 서버로 요청을 날려 그시점의 시간정보 저장 및 기타 검증
시작 종료 시간을 DB 나 프로그램에서 연산
정도가 되지 않을까 싶습니다.
웹메이킹님 답변 정말 감사드립니다. 꾸벅.
말씀하신데로 해보았는데 이렇게 나타나네요.
뭐가 문제일까요?
그리고,
이렇게 해보았더니
<table class="qa_05">
<thead>
<tr>
<th class="qa_05-a01" colspan="2"><span style="font-size: 17px; font-weight: bold;">사용 시간</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="qa_05-a02">• 시작 시각</td>
<td class="qa_05-a02"><input type="time" id="mb_start_time" name="mbstart_time" required></td>
</tr>
<tr>
<td class="qa_05-a02">• 끝낸 시각</td>
<td class="qa_05-a02"><input type="time" id="mb_end_time" name="mb_end_time" required onchange="calculateTimeDifference()"></td>
</tr>
<tr>
<td class="qa_05-a02">• 사용 시간</td>
<td class="qa_05-a02"><input type="time" id="usage_time_display" name="usage_time_display"></td>
</tr>
</tbody>
</table>
<!-- 추가한 부분: 사용 시간 표시를 위한 <div> -->
<div id="usage_time_display"></div>
<script>
function calculateTimeDifference() {
// 입력한 시작 시각과 끝낸 시각 가져오기
const startTimeInput = document.getElementById("mb_start_time");
const endTimeInput = document.getElementById("mb_end_time");
const startTime = startTimeInput.value;
const endTime = endTimeInput.value;
// 시작 시각과 끝낸 시각을 Date 객체로 변환
const startDateTime = new Date("2023-07-01T" + startTime);
const endDateTime = new Date("2023-07-01T" + endTime);
// 끝낸 시각이 시작 시각보다 이전인 경우(다음 날로 넘어갔을 경우) 날짜를 하루 증가
if (endDateTime < startDateTime) {
endDateTime.setDate(endDateTime.getDate() + 1);
}
// 사용 시간 계산
const timeDiff = endDateTime - startDateTime;
const hours = Math.floor(timeDiff / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
// 사용 시간을 "시간:분" 형식으로 표시하여 출력
const usageTimeDisplay = document.getElementById("usage_time_display");
usageTimeDisplay.textContent = `${hours}시간 ${minutes}분`;
// 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)
}
</script>
너무나 죄송하고 감사하지만...
추가 조언 부탁드립니다.
감사합니다.
문제는 input type="time"을 사용하여 입력한 시간은 시간대(time zone) 정보를 포함하지 않기 때문에, Date 객체로 변환할 때 정확한 날짜와 시간 정보를 가지지 못하는 것 같습니다. 이로 인해 올바른 시간 차이를 계산하는 데 문제가 발생하는 것 같습니다.
input type="time" 대신 input type="text"을 사용하여 시간을 입력 받고, 사용자가 "HH:mm" 형식으로 시간을 입력하도록 유도하면 될것같고, 사용자 입력값을 기준으로 Date 객체를 생성하면 올바른 시간 차이를 계산할 수 있지 않을까 하는 생각입니다.
예제로 다음과 같이 해볼 수 있을 것 같습니다.
<table class="qa_05">
<thead>
<tr>
<th class="qa_05-a01" colspan="2"><span style="font-size: 17px; font-weight: bold;">사용 시간</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="qa_05-a02">• 시작 시각</td>
<td class="qa_05-a02"><input type="text" id="mb_start_time" name="mbstart_time" placeholder="HH:mm" required></td>
</tr>
<tr>
<td class="qa_05-a02">• 끝낸 시각</td>
<td class="qa_05-a02"><input type="text" id="mb_end_time" name="mb_end_time" placeholder="HH:mm" required onchange="calculateTimeDifference()"></td>
</tr>
<tr>
<td class="qa_05-a02">• 사용 시간</td>
<td class="qa_05-a02"><input type="text" id="usage_time_display" name="usage_time_display" readonly></td>
</tr>
</tbody>
</table>
<!-- 추가한 부분: 사용 시간 표시를 위한 <div> -->
<div id="usage_time_display"></div>
<script>
function calculateTimeDifference() {
// 입력한 시작 시각과 끝낸 시각 가져오기
const startTimeInput = document.getElementById("mb_start_time");
const endTimeInput = document.getElementById("mb_end_time");
const startTime = startTimeInput.value;
const endTime = endTimeInput.value;
// 현재 날짜 가져오기 (YYYY-MM-DD 형식으로)
const currentDate = new Date().toISOString().split('T')[0];
// 시작 시각과 끝낸 시각을 Date 객체로 변환 (현재 날짜를 포함하지 않도록)
const startDateTime = new Date(currentDate + "T" + startTime);
const endDateTime = new Date(currentDate + "T" + endTime);
// 끝낸 시각이 시작 시각보다 이전인 경우(다음 날로 넘어갔을 경우) 날짜를 하루 증가
if (endDateTime < startDateTime) {
endDateTime.setDate(endDateTime.getDate() + 1);
}
// 사용 시간 계산
const timeDiff = endDateTime - startDateTime;
const hours = Math.floor(timeDiff / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
// 사용 시간을 "시간:분" 형식으로 표시하여 출력
const usageTimeDisplay = document.getElementById("usage_time_display");
usageTimeDisplay.value = `${hours}시간 ${minutes}분`;
// 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)
}
</script>
답변을 작성하시기 전에 로그인 해주세요.