목록으로

사용 시간 자동 계산 채택완료

Willfor716

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 2,445

답변 4

안녕하세요.

사용 시간을 자동 계산해서 표시해 주고 그 값을 특정 테이블에 입력할려고 합니다.

그런데 여러가지 방법을 사용해 봤는데 잘 안되네요.

고수님들의 조언 부탁드립니다.

감사합니다.

Copy







 

    사용 시간

 





 

    • 시작 시각

    

 

 

    • 끝낸 시각

    

 



 

// 이 부분에 끝낸 시각을 입력과 동시에 사용 시간 자동 계산해서 표시되고 이 값을 특정 테이블에 입력

끝낸 시각을 입력과 동시에 사용 시간 자동 계산해서 "시간:분" 형식으로 표시되고 이 값을 특정 테이블에 입력하게 할려고 합니다.

그리고, 시작 시각이 늦은 밤이고 끝낸 시각이 그 다음 날일 경우도 있습니다.

이렇때도 자동 계산 되게 할려고 합니다.

조언 부탁드립니다.

감사합니다.

#그누보드5 #php

답변 4개

정렬:

채택된 답변

+20 포인트

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

질문의 내용을 토대로 예제를 만들어 본다면 다음과 같이 할 수 있을 것 같습니다.

Copy





  

    

      사용 시간

    

  

  

    

      • 시작 시각

      

    

    

      • 끝낸 시각

      

    

  









  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}분`;

    // 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)

  }

calculateTimeDifference() 함수가 사용 시간을 계산하고, 계산 결과를 "시간:분" 형식으로 표시하고 onchange 이벤트를 사용하여 끝낸 시각 입력창의 값이 변경될 때마다 이 함수가 호출되도록 합니다.

그러면 끝낸 시각을 입력하면 사용 시간이 자동으로 계산되어 화면에 표시되고, 사용 시간을 특정 테이블에 입력하는 로직은 서버로 전송하거나 원하는 방식으로 추가하시면 될것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

Willfor716

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

답변 정말 감사드립니다. 꾸벅.

말씀하신데로 해보았는데 이렇게 나타나네요.
뭐가 문제일까요?

이미지가 안들어가서 문자로만 표시하면
"NaN시간 NaN"
이렇게 나타납니다.

댓글쓰기에는 이미지가 안들어가서 위 부분에 willfor716 으로 답변 작성하여 다시 설명 드렸습니다.

너무나 죄송하고 감사하지만...
추가 조언 부탁드립니다.
감사합니다.

�

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

로직을 어떤식으로 작성하셨는지 정확히 모르기 때문에 구체적인 답변을 드리기는 어려울 것 같습니다.

끝낸 시각을 Date 객체로 변환할 때, 날짜를 동적으로 설정해주기 위해
const currentDate = new Date().toISOString().split('T')[0];를 사용하여 현재 날짜를 YYYY-MM-DD 형식으로 가져오게 수정하였으며,
startDateTime과 endDateTime을 설정할 때, 현재 날짜를 포함하여 끝낸 시각이 시작 시각보다 이전인지 체크할 수 있도록 수정해봤습니다

참고하셔서 원하시는 로직으로 구현하시면 될 것 같습니다.

[code]


<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>
[/code]

로직을 어떤식으로 작성하셨는지 정확히 모르기 때문에 구체적인 답변을 드리기는 어려울 것 같습니다.

끝낸 시각을 Date 객체로 변환할 때, 날짜를 동적으로 설정해주기 위해 
const currentDate = new Date().toISOString().split('T')[0];를 사용하여 현재 날짜를 YYYY-MM-DD 형식으로 가져오게 수정하였으며,  
startDateTime과 endDateTime을 설정할 때, 현재 날짜를 포함하여 끝낸 시각이 시작 시각보다 이전인지 체크할 수 있도록 수정해봤습니다

참고하셔서 원하시는 로직으로 구현하시면 될 것 같습니다.

[code]

// 시작 시각과 끝낸 시각을 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>
[/code]

댓글을 작성하려면 로그인이 필요합니다.

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

문제는 input type="time"을 사용하여 입력한 시간은 시간대(time zone) 정보를 포함하지 않기 때문에, Date 객체로 변환할 때 정확한 날짜와 시간 정보를 가지지 못하는 것 같습니다. 이로 인해 올바른 시간 차이를 계산하는 데 문제가 발생하는 것 같습니다.

input type="time" 대신 input type="text"을 사용하여 시간을 입력 받고, 사용자가 "HH:mm" 형식으로 시간을 입력하도록 유도하면 될것같고, 사용자 입력값을 기준으로 Date 객체를 생성하면 올바른 시간 차이를 계산할 수 있지 않을까 하는 생각입니다.

예제로 다음과 같이 해볼 수 있을 것 같습니다.

Copy





  

    

      사용 시간

    

  

  

    

      • 시작 시각

      

    

    

      • 끝낸 시각

      

    

    

      • 사용 시간 

      

    

  









  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}분`;

    // 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)

  }

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Willfor716

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

웹메이킹님 답변 정말 감사드립니다. 꾸벅.
말씀하신데로 해보았는데 이렇게 나타나네요.
뭐가 문제일까요?

3731643943_1689775846.6331.png

그리고,

이렇게 해보았더니

Copy





  
    
      사용 시간
    
  
  
    
      • 시작 시각
      
    
    
      • 끝낸 시각
      
    
    
      • 사용 시간 
      
    
  




  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}분`;
    // 이 값을 특정 테이블에 입력하는 로직 추가 필요 (서버로 전송하는 방식 등)
  }