바닐라 자바스크립트 시간 인사말

오늘 기사에서는 사용자의 시간대에 따라 인사하는 방법을 살펴보겠습니다.

3번의 다른 시간을 확인 후 인사드리겠습니다.

< 12 : 12시 이전에는 모두 Good morning이라고 말해야 합니다.

12-18 : 정오가 좋은 오후라고 말해야 합니다.

> 18 : 오후 6시 이후에 안녕이라고 인사하세요

최종 사용자를 위해 약간의 추가 노력을 기울이는 멋진 작은 스크립트입니다.

이 Codepen에서 시간을 기준으로 최종 결과를 볼 수 있습니다.

HTML 구조

오늘 우리HTML는 이보다 쉬울 수 없습니다. 단 하나의 div를 활용할 수 있습니다.

<div id="greeting"></div>

이 div 안에 해당 시간에 유효한 인사말을 배치합니다.

페이지 스타일링

우리 페이지에 약간의 기본적인 스타일을 추가해 봅시다. 미친 것은 없고 중앙에 있는 상당히 큰 블록입니다.

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #ffe6ab;
}
div {
  padding: 2rem;
  background: #06d6a0;
  border-radius: 10px;
  font-size: 3rem;
  color: #fff;
}

사용된 중심 방법은 Grid absolute center 입니다.

바닐라 자바스크립트 시간 기반 인사말

JavaScript 부분에서 이를 위해 먼저 인사말 div를 가져와야 합니다.
documentGetElementById 선택기를 사용합니다.

const greeting = document.getElementById('greeting');

다음으로 필요한 것은 해당 사용자의 현재 시간입니다.
새로운 Date 객체에 접근하고 getHours 메소드를 사용할 수 있습니다.

시간이 11 그렇게 멋진 경우 11:55와 같은 값을 반환합니다. 인사말이 작동하는 방식이기 때문입니다.

const hour = new Date().getHours();

또한 세 가지 인사말 유형이 필요합니다.

const welcomeTypes = ['Good morning', 'Good afternoon', 'Good evening'];

마지막으로 필요한 부분은 텍스트를 넣을 let입니다.

let welcomeText = '';

그런 다음 시간이 특정 경우와 일치하는지 확인하고 올바른 줄을 반환할 수 있습니다.

if (hour < 12) welcomeText = welcomeTypes[0];
else if (hour < 18) welcomeText = welcomeTypes[1];
else welcomeText = welcomeTypes[2];

시간이 12시 미만이면 Good morning인 welcomeType[0]를 반환합니다.
18보다 낮으면 안녕히 주무세요, 그렇지 않으면 안녕히 주무세요.

마지막 단계는 이 welcomeText를 div에 넣는 것입니다.

greeting.innerHTML = welcomeText;

그것은 그! 이제 사용자의 시간을 기반으로 하는 완전한 기능의 환영 인사말이 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는