아래의 코드처럼 index.html의 html파일을 만들어줍니다.
<!DOCTYPE html>
<html>
<head>
<title>newtab/title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main-container">
<div class="main-wrapper">
<div class="today-info">
<div class="date" id="date">
<!-- 날짜&요일 -->
</div>
<div class="time" id="time">
<!-- 현재 시간 -->
</div>
</div>
</div>
</div>
<script src="./js/clock.js"></script>
</body>
</html>
그 다음 clock.js라는 js파일을 만들고 위의 날짜와 요일의 클래스를 할당해주겠습니다.
const dateElement = document.getElementById("date");
const timeElement = document.getElementById("time");
날짜
먼저 dateElment에 오늘의 날짜와 요일을 계산하는 기능을 만들어보겠습니다.
const dateElement = document.getElementById("date");
const timeElement = document.getElementById("time");
const getNowDate = () => {
const nowDate = new Date();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let day = nowDate.getDay();
};nowDate 변수에는 생성자를 사용해서 Date 객체를 할당해주고 month 변수에는 getMonth 메서드를 사용해 오늘이 몇 월 인지를, date변수에는 getDate 메서드를 사용해 오늘이 몇 일 인지를, 그리고 day 변수에는 getDay 메서드로 오늘이 무슨 요일 인지에 대한 값을 넣어주겠습니다.
그 다음, getMonth 메서드는 0부터 11까지의 숫자를 반환하기 때문에 getMonth의 반환값에 +1을 해주고, 알맞은 요일을 표시하기 위해 week라는 변수에는 일요일부터 토요일까지의 값을 배열에 담아준 다음, getDay 메서드가 반환하는 값을 week 배열에 인덱스로 사용해주겠습니다.
그리고 함수를 호출해보겠습니다.
const dateElement = document.getElementById("date");
const timeElement = document.getElementById("time");
const getNowDate = () => {
const nowDate = new Date();
const week = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
let month = nowDate.getMonth()+1;
let date = nowDate.getDate();
let day = week[nowDate.getDay()];
console.log(month, date, day);
};
getNowDate();알맞은 요일이 나오는 것을 볼 수 있습니다.
여기서 날짜를 조금 더 깔끔하게 나타내기 위해 한 자릿수의 앞에는 '0'을 붙여보겠습니다.
숫자를 수정하는 함수를 만들어주고 삼항연산자를 사용해줍니다.
추가로 매개변수 값을 숫자와 비교해야하기 때문에 "묵시적 형 변환"을 사용해 parseInt로 숫자로 변환해주겠습니다.
const modifyNumber = (number) => {
return parseInt(number) < 10 ? "0" + number: number;
};
원하는 값이 나옵니다. 이제 이 값을 dateElement에 텍스트로 설정해주겠습니다.
setNowDate함수를 만들고 매개변수로 위의 변수들을 받고 값을 설정해줍니다.
const getNowDate = () => {
const nowDate = new Date();
const week = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
let month = modifyNumber(nowDate.getMonth() + 1);
let date = modifyNumber(nowDate.getDate());
let day = week[nowDate.getDay()];
setNowDate(month, date, day);
};
const setNowDate = (month, date, day) => {
dateElement.textContent = `${month}월${date}일 ${day}`;
브라우저를 열어보면 화면에 오늘의 날짜가 나타나있는 것을 볼 수 있습니다.
시간
시간도 마찬가지로 getNowTime함수를 생성해 현재시간을 Date객체에서 가져옵니다.
const getNowTime = () => {
const nowDate = new Date();
let hour = modifyNumber(nowDate.getHours());
let minute = modifyNumber(nowDate.getMinutes());
console.log(hour, minute);
};콘솔을 확인해보니 지금 시간이 알맞게 출력이됩니다.
이제 시간엘리먼트에 현재시간을 텍스트로 넣어주겠습니다.
const setNowTime = (hour, minute) => {
timeElement.textContent = `${hour}:${minute}`;
};결과입니다. 현재 날짜, 시간이 정확하게 나옴을 알 수 있습니다.
문제
여기서 한가지 문제가 발생합니다. 바로 현재의 시간이 실시간으로 업데이트 되어야하는데 처음 저장한 값이 계속 보입니다.
따라서 setInterval() 이라는 일정한 시간 간격으로, 반복적으로 특정 함수를 실행할 수 있는 내장함수를 이용할겁니다.
매개변수로 실행될함수와, ms를 전달받습니다.
시계가 현재시간을 나타낼 수 있게 하기 위해서는 1초마다 실행해야합니다.
setInterval(getNowTime,1000);
js전체코드
const dateElement = document.getElementById("date");
const timeElement = document.getElementById("time");
const modifyNumber = (number) => {
return parseInt(number) < 10 ? "0" + number: number;
};
const getNowDate = () => {
const nowDate = new Date();
const week = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
let month = modifyNumber(nowDate.getMonth() + 1);
let date = modifyNumber(nowDate.getDate());
let day = week[nowDate.getDay()];
setNowDate(month, date, day);
};
const setNowDate = (month, date, day) => {
dateElement.textContent = `${month}월${date}일${day}`;
};
const getNowTime = () => {
const nowDate = new Date();
let hour = modifyNumber(nowDate.getHours());
let minute = modifyNumber(nowDate.getMinutes());
setNowTime(hour, minute);
};
const setNowTime = (hour, minute) => {
timeElement.textContent = `${hour}:${minute}`;
};
getNowDate();
getNowTime();
setInterval(getNowTime,1000);
css
css는 다음과 같이 설정해주었습니다.
먼저 폰트사이즈입니다.
:root {
--xlarge: 170px;
--large: 28px;
--medium: 18px;
--small: 16px;
--xsmall: 14px;
}그 다음 body에 구글폰트사이트에서 가져온 폰트를 넣어줍니다.
body {
margin: 0 auto;
width: 100%;;
font-family: "Noto Sans KR", sans-serif;
}그리고 main-container에는 display flex를 해주고 가로,세로 정렬을 해주고 세로길이가 꽉차게끔 100vh를 적용해주겠습니다.
.main-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
css전체코드입니다.
:root {
--xlarge: 170px;
--large: 28px;
--medium: 18px;
--small: 16px;
--xsmall: 14px;
}
body {
margin: 0 auto;
width: 100%;;
font-family: "Noto Sans KR", sans-serif;
}
.main-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main-container .main-wrapper{
text-align: center;
}
/* 시계 */
.main-wrapper .date {
font-size: var(--large);
font-weight: 400;
}
.main-wrapper .time {
font-size: var(--xlarge);
font-weight: 400;
margin-top: -35px;
}
다음포스팅에서는 검색어를 입력하면 검색 결과 페이지로 이동할 수 있는 검색 바를 만들겠습니다.
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript - 4. 명언 설정하기 (0) | 2023.06.11 |
|---|---|
| javascript - 3.검색 바 만들기 (0) | 2023.06.10 |
| javascript - 1.크롬시작화면만들기 (0) | 2023.06.10 |
| javascript - localStorage로 데이터 저장 (0) | 2023.06.08 |
| javascript - 입력 폼 활용하기 (0) | 2023.06.05 |
