조건에 따른 메시지 출력 강의
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>
답변 1
0
안녕하세요! 서연님!
콘솔에서 4개를 찍고 있기 때문에 총 4번의 NaN이 나오게 된 것 같아요!
console.log(remainingDate, remainingHours, remainingMin, remainingSec); // 여기
이는 단지 콘솔로그 이므로 실행 결과에 영향을 주지는 않습니다!
따라서, 원하는 결과만 잘 나온다면 위 메시지는 크게 신경쓰지 않아도 괜찮아요!^^
강의 내용 PPT 제공
0
177
2
openweather 401 오류 지속적으로 발생해요..ㅠ
0
374
3
Geolocationposition 오류
1
521
1
for of, for in 강의에서
0
217
1
선생님 remaining 질문입니다.
0
232
1
ppt 제공
0
326
1
혹시 프론트, 백엔드 코스랑 강의가 겹치나요?
0
533
2
display:flex의 의미
0
428
1
반복문을 활용한 날짜 데이터 리팩토링
0
285
2
JS로 HTML. CSS 조작
0
256
1
locallhost
0
473
2
객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)
0
254
1
interval에 대한 질문입니다.
0
278
2
이해가 안되는 부분..
0
400
2
강의 보며 작업한 코드를
0
395
1
제대로 이해한건지 모르겠어요..
0
322
2
강의자료 부탁드립니다.
0
478
1
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
0
5060
1
openweather api 2.5 관련 질문드립니다
0
745
2
openweather 401에러
0
520
1
createTodo함수 안에 매개변수
0
242
1
contents : complete : 가 무슨뜻인가요?
0
255
2
Javascript Exercise 깃허브에 푸쉬
0
349
1
savedWeatherData 조건문
1
352
1