훈훈한 Javascript (14)

< 섹션 4 >

7. 반복문을 사용한 텍스트 갱신

일반적으로 카운트 다운이라고 하면 시간초가 줄어드는게 보여야 한다.

for 문 써주고 counterMaker 함수가 100번 반복하도록 해줌.

= 별 차이 안보임

= 100번을 빠르게 반복해서 실행해주고 있는 상태.

= 너무 빨라서 보이지 않는 것

자바스크립트에 코드의 실행을 늦춰주는 기능

= setTimeout

 

화살표 함수 fn 사용 

이것도 함수 (익명함수)

() => {

}

익명함수를 setTimeout 함수에 작성

counterMaker 함수를 안에 넣어준다.

그리고 콤마 + 5000

시간이 지연되면서 보여진다.

5000 = 5000 밀리 초 ( = 5초 )

1000 * i 적용

i = 1 씩 증가

1초마다 실행되고 있음.

 

근데 100 (i < 100) 번 반복하도록 해놨으므로

100초가 지나게되면 멈추게 됨.

---

8. setInterval

함수창 하나 만들어주기

setInterval() 함수 사용 - 자바스크립트 안에 내장되어있는 함수

콤마로 구분해서 두 개의 값 넣어준다.

hi 문자가 반복적으로 실행되고 있는 걸 확인할 수 있다.

setInterval() 함수 = 왼쪽 네모박스 기능을 자체적으로 해주고 있음.

몇 초마다 반복실행 해 줄 것인지 입력

1000 = 1초마다 반복실행

반복 실행해 줄 함수 부분

1초마다 test 함수 실행시켜줘라 라는 뜻

 

함수가 실행되면 console.log 명령어가 실행됨.

화살표 함수 사용하지않고 더 간결하게 사용할 수 있음.

소괄호 없이 함수의 이름만 작성해주면 된다.

setTimeout 도 길게 적을 필요 없이,

실행하고 싶은 함수의 이름만 적어두면 됨.

하지만 100번 반복되면 멈춰버리는건 여전하다.

for 문 주석처리하고

setInterval 써준다.

근데 오류가 좀 있음.

1초마다 반복해달라고 얘기를 하고 있지만,

바로 실행되는게 아니라

1초 뒤부터 실행이된다.

이걸 해결해 주려면 자체적으로 함수 한 번을 실행해주면 된다.

//페이지 접속하자마자 텍스트 뜨게 하기
const messageContainer = document.querySelector("#d-day-message");
const container = document.querySelector("#d-day-container");
container.style.display = "none";
messageContainer.innerHTML = "<h3>D-Day를 입력해주세요<h3>";
//날짜 입력하는대로 갖고오는 함수
const dateForMaker = function () {
  const inputYear = document.querySelector("#target-year-input").value;
  const inputMonth = document.querySelector("#target-month-input").value;
  const inputDate = document.querySelector("#target-date-input").value;
  //querySelector을 사용해서 태그들을 갖고와줌. 괄호 안에 어떤 태그를 갖고올 지 적어준다.

  //템플릿리터럴
  const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
  /*이것과 동일한 코드지만 더 보기에 좋다.
    const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate;*/

  //console.log(inputYear, inputMonth, inputDate);
  return dateFormat;
};

//현재 날짜 데이터(new Date) 갖고오는 함수
const counterMaker = function () {
  //리턴 데이터(return dateFormat)가 담겨진 함수(dateForMaker)를 변수에 넣어준다. 그리고 확인
  const targetDateInput = dateForMaker();

  //현재 날짜 데이터(new Date) 갖고옴
  const nowDate = new Date();
  //targetDateInput(dateForMaker 함수가 담겨있는 변수) 참조(new Date를 사용해서 문자열을 입력)
  const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
  //현재 시각과 "2023-9-15" 사이의 시간 차이가 ;'밀리초 단위'로 콘솔에 출력

  //시간 차이를 밀리초(ms)에서 "초(seconds)" 단위로 변환
  //날짜 입력하는대로 값을 갖고오는 함수 - 현재 시각
  const remaining = (targetDate - nowDate) / 1000;

  // 만약, remaining 이 0 이라면, 타이머가 종료 되었습니다. 출력
  if (remaining <= 0) {
    container.style.display = "none";
    messageContainer.innerHTML = "<h3>타이머가 종료되었습니다.</h3>";
    messageContainer.style.display = "flex";
    return;
  } else if (isNaN(remaining)) {
    // 만약, 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다. 출력
    container.style.display = "none";
    messageContainer.innerHTML = "<h3>유효한 시간대가 아닙니다.</h3>";
    messageContainer.style.display = "flex";
    return;
  }
  //시간 차이를 초 단위에서 "일(day)/시간(hours)/분(Minutes)/초" 단위로 변환한 값을 저장하는 변수
  const remainingObj = {
    remainingDate: Math.floor(remaining / 3600 / 24),
    remainingHours: Math.floor(remaining / 3600) % 24,
    remainingMin: Math.floor(remaining / 60) % 60,
    remainingSec: Math.floor(remaining) % 60,
  };

  // const documentObj = {
  //   days: document.getElementById("days"),
  //   hours: document.getElementById("hours"),
  //   min: document.getElementById("min"),
  //   sec: document.getElementById("sec"),
  // };

  const documentArr = ["days", "hours", "min", "sec"];
  const timeKeys = Object.keys(remainingObj);
  //const docKeys = Object.keys(documentObj);

  // *for of 문 / 이것 또한, 화면에 일, 시간, 분, 초 띄워줌 (D-Day 를 입력해주세요 상단의 시간 표시.)
  let i = 0;
  for (let tag of documentArr) {
    document.getElementById(tag).textContent = remainingObj[timeKeys[i]];
    i++;
  }

  // for in 문 / 화면에 일, 시간, 분, 초 띄워줌 (D-Day 를 입력해주세요 상단의 시간 표시.)
  //let i = 0;
  // for (let key in documentObj) {
  //   documentObj[key].textContent = remainingObj[timeKeys[i]];
  //   i++;
  // }
};

// 움직이는 카운트 다운 기능 만들기
const starter = function () {
  container.style.display = "flex";
  messageContainer.style.display = "none";
  setInterval(counterMaker, 1000);
};