반응형
Data 객체를 이용한 날짜 가져오기
| getFullYear() | 연도 |
| getMonth() | 월 (0부터 시작, 0 - 1월, 1 - 2월, ... 11 - 12월) |
| getDate() | 일 |
| getHours() | 시간 (0 ~ 23, 24시간 기준, 밤 10시는 22) |
| getMinutes() | 분 (0 ~ 59) |
| getSeconds() | 초 (0 ~ 59) |
| getMilliseconds() | 밀리초 |
| getDay() | 요일 (0 ~ 6, 0:일요일 ~ 6:토요일) |
| getLocaleString() | ex) 2020.12.29. 오후 10:24:23 |
| toLocaleDateString() | ex) 2020.12.29. |
| toLocaleTimeString() | ex) 오후 10:24:23 |
PS. setXXX 메소드를 사용하여 날짜를 지정할 수 있다. ex) 년도 지정 setFullYear(2011) // 2011년으로 세팅
예제
// 데이터 객체 생성
const date = new Date();
// 날짜, 시간, 요일 함수를 이용해 변수에 담기
const year = date.getFullYear();
const month = date.getMonth()+1;
const day = date.getDate();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const week = date.getDay();
const weekList = ['일', '월', '화', '수', '목', '금', '토'];
// 현재 시간 변수에 담기
const label = `지금은 ${year}년 ${month}월 ${day}일 ${weekList[week]}요일 ${hour}시 ${minutes}분 ${seconds}초 입니다.`;
// 콘솔로 출력
console.log(label);
// 현재 시간과 날씨 가져오기
const locale = date.toLocaleString(); // 2020.12.29. 오후 10:24:23
const localeDate = date.toLocaleDateString(); // 2020.12.29.
const localeTime = date.toLocaleTimeString(); // 오후 10:24:23
// 콘솔로 출력
console.log(locale);
console.log(localeDate);
console.log(localeTime);
날짜 계산하기
몇개월전, 몇일후의 날짜를 구할 수 있다.
예제
// 2020년 1월 1일로 날짜 객체 생성
const date = new Date('2020/05/01');
date.setMonth(date.getMonth() -1); // 1개월전
console.log(date.toLocaleDateString()); // 결과: 2020.04.01
date.setDate(date.getDate() + 60); // 60일 후
console.log(date.toLocaleDateString()); // 결과: 2020. 6. 30.
날짜 차이 구하기
두 날짜의 차이를 구하고 싶을 경우
예제
const dateA = new Date('2020/06/01');
const dateB = new Date('2020/05/01');
const diffMSec = dateA.getTime() - dateB.getTime();
// 일수 차이 (24*60*60*1000)
// 시간 차이 (60*60*1000)
// 분 차이 (60*1000)
const diffDate = diffMSec / (24*60*60*1000);
console.log(`날짜의 차이는 ${diffDate}일 ); // 날짜의 차이는 31일카운트 다운
제한 시간을 설정하여 카운트다운 하기
예제
const totalTime = 10000; // 10초
const oldTime = Date.now();
// 1초에 한번 실행되는 타이머
const timer = setInterval(() => {
const currTime = Date.now();
const diff = currTime - oldTime;
const remainMSec = totalTime - diff;
const remainSec = Math.ceil(remainMSec/1000);
let label = `남은시간 ${remainSec}`;
// 0초 이하일 경우 타이머 종료
if(remainSec <= 0) {
clearInterval(timer);
}
// 화면 표시 예시
document.querySelector('#log').innerHTML = label;
// 콘솔 표시 예시
console.log(label);
}, 1000);아날로그시계 만들기
아날로그 시계 만들기
사용하는 파일 clock.html, clock.css, clock.js
예제 (clock.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clock</title>
<link rel="stylesheet" href="clock.css">
<script src="clock.js"></script>
</head>
<body>
<div class="clock">
<div class="num3">3</div>
<div class="num6">6</div>
<div class="num9">9</div>
<div class="num12">12</div>
<div class="dot"></div>
<div class="lineHour"></div>
<div class="lineMin"></div>
<div class="lineSec"></div>
</div>
</body>
</html>예제 (clock.css)
body {
background-color: burlywood;
}
.clock {
border-radius: 50%;
border: 3px solid black;
border-width: 5px;
width: 400px;
height: 400px;
background: white;
position: relative;
vertical-align: middle;
}
.num3 {
top: calc(50% - 20px);
left:calc(100% - 30px);
position: absolute;
font-size: 34px;
}
.num6 {
top: calc(100% - 40px);
left:calc(50% - 5px);
position: absolute;
font-size: 34px;
}
.num9 {
top: calc(50% - 20px);
left:calc(10px);
position: absolute;
font-size: 34px;
}
.num12 {
top: 5px;
left:calc(50% - 14px);
position: absolute;
font-size: 34px;
}
.dot {
border-radius: 50%;
width: 5px;
height: 5px;
border: 3px solid black;
background-color: black;
position: absolute;
top:calc(50% - 5px);
left:calc(50% - 5px);
transform-origin: bottom;
z-index: 10;
}
.lineHour {
width: 10px;
height: 110px;
background: black;
position: absolute;
top: calc(50% - 110px);
left: calc(50% - 5px);
transform-origin: bottom;
border-radius: 100%
}
.lineMin {
width: 4px;
height: 160px;
background: black;
position: absolute;
top: calc(50% - 160px);
left: calc(50% - 2px);
transform-origin: bottom;
border-radius: 100%
}
.lineSec {
width: 2px;
height: 130px;
background: red;
position: absolute;
top: calc(50% - 130px);
left: calc(50% - 1px);
transform-origin: bottom;
border-radius: 100%
}
예제 (clock.js)
// 1초에 한번 호출되는 타이머
setInterval(()=>{
const now = new Date();
const h = now.getHours(); // 시간 (0~23)
const m = now.getMinutes(); // 분 (0~59)
const s = now.getSeconds(); // 초 (0~59)
// 시계 바늘 각도
const degH = h * (360/12) + m * (360/12/60);
const degM = m * (360/60);
const degS = s * (360/60);
// div를 가져와서
const elementH = document.querySelector('.lineHour');
const elementM = document.querySelector('.lineMin');
const elementS = document.querySelector('.lineSec');
// 각도 조절
elementH.style.transform = `rotate(${degH}deg)`;
elementM.style.transform = `rotate(${degM}deg)`;
elementS.style.transform = `rotate(${degS}deg)`;
},1000);
반응형
'개발 > javascript' 카테고리의 다른 글
| [javascript] 최고의 토스트 알림 라이브러리 9종 (0) | 2023.02.19 |
|---|---|
| [javascript] 객체 선언, 복사, 변경 (0) | 2021.01.18 |
| [javascript] 배열 정리 (0) | 2021.01.18 |
| [javascript] 문자열 길이 맞추기 padStart, padEnd (0) | 2021.01.18 |
| [javascript] 랜덤값 구하기 crypto.getRandomValues() (0) | 2021.01.18 |
댓글