-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
해결됨
조건에 따른 메시지 출력 강의
23.10.23 17:22 작성 23.10.23 17:25 수정 조회수 80
0
7:49 부분에 강사님은 NaN이 한 번만 출력되는데 저는 NaN NaN NaN NaN 총 네 번이 출력되는데 괜찮나요...?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="./style.css" />
<script>
const dateForMaker = function () {
// HTML에서 입력된 연도 값을 가져와서 inputYear 변수에 저장
const inputYear = document.querySelector("#target-year-input").value;
// HTML에서 입력된 월 값을 가져와서 inputMonth 변수에 저장
const inputMonth = document.querySelector("#target-month-input").value;
// HTML에서 입력된 날짜 값을 가져와서 inputDate 변수에 저장
const inputDate = document.querySelector("#target-date-input").value;
// 연도, 월, 날짜를 하이픈으로 연결하여 날짜 형식 문자열 생성
// const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate;
const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
// 생성된 날짜 형식 문자열을 반환
return dateFormat;
// console.log(inputYear, inputMonth, inputDate);
};
const counterMaker = function () {
const targeDateInput = dateForMaker();
// 현재 시간
const nowDate = new Date();
// 대상 날짜를 생성하고 시, 분, 초, 밀리초를 0으로 설정
const targetDate = new Date(targeDateInput).setHours(0, 0, 0, 0);
// emaining = 남은 시간을 초로 환산
// 밀리초를 초로 변환하기 위해 1000을 나눔
const remaining = (targetDate - nowDate) / 1000;
console.log(targetDate);
// remaining이 0보다 작으면 즉, 타이머가 종료된다면
if (remaining <= 0) {
// "타이머가 종료되었습니다." 출력
console.log("타이머가 종료되었습니다.");
// 만약 잘못된 날짜가 들어왔다면 "유효한 시간대가 아닙니다." 출력
} else if (remaining === NaN) {
console.log("유효한 시간대가 아닙니다.");
}
// 'remaining' 값을 3600(초당 시간)과 24(시간당 일)로 나눈 후 정수 부분을 남은 일수로 저장
const remainingDate = Math.floor(remaining / 3600 / 24);
// 'remaining' 값을 3600(초당 시간)으로 나눈 후 24(시간)로 나눈 나머지를 남은 시간(시)으로 저장
const remainingHours = Math.floor(remaining / 3600) % 24;
// 'remaining' 값을 60(초당 분)으로 나눈 후 60(분)으로 나눈 나머지를 남은 분으로 저장
const remainingMin = Math.floor(remaining / 60) % 60;
// 'remaining' 값을 60(초)으로 나눈 후 60(초)으로 나눈 나머지를 남은 초로 저장
const remainingSec = Math.floor(remaining) % 60;
// 남은 일, 시간, 분, 초를 콘솔에 출력
console.log(remainingDate, remainingHours, remainingMin, remainingSec);
};
</script>
</head>
<body>
<h1>D-Day</h1>
<div id="d-day-container">
<div class="d-day-child-container">
<span id="days">0</span>
<span>일</span>
</div>
<div class="d-day-child-container">
<span id="hours">0</span>
<span>시간</span>
</div>
<div class="d-day-child-container">
<span id="min">0</span>
<span>분</span>
</div>
<div class="d-day-child-container">
<span id="sec">0</span>
<span>초</span>
</div>
</div>
<div id="target-selector">
<!-- 연도를 입력받는 입력란. 'id'는 "target-year-input"이며 CSS 클래스는 "target-input"입니다. -->
<input id="target-year-input" class="target-input" size="5" /> -
<!-- 월을 입력받는 입력란. 'id'는 "target-month-input"이며 CSS 클래스는 "target-input"입니다. -->
<input id="target-month-input" class="target-input" size="5" /> -
<!-- 날짜를 입력받는 입력란. 'id'는 "target-date-input"이며 CSS 클래스는 "target-input"입니다. -->
<input id="target-date-input" class="target-input" size="5" />
</div>
<button onclick="counterMaker()" id="start-btn">카운트다운 시작</button>
</body>
</html>
답변을 작성해보세요.
0
노원두
지식공유자2023.10.24
안녕하세요! 서연님!
콘솔에서 4개를 찍고 있기 때문에 총 4번의 NaN이 나오게 된 것 같아요!
console.log(remainingDate, remainingHours, remainingMin, remainingSec); // 여기
이는 단지 콘솔로그 이므로 실행 결과에 영향을 주지는 않습니다!
따라서, 원하는 결과만 잘 나온다면 위 메시지는 크게 신경쓰지 않아도 괜찮아요!^^
답변 1