[JavaScript] 현재 날짜+요일+시간을 표시하는 시계
2021. 3. 5. 15:00ㆍProgram/JavaScript
현재날짜와 요일, 그리고 매초 갱신되는 시계 만들기
물론 CSS로 디자인을 정리해 줘야 하지만, 위와 같은 시계를 만드는 코드
CSS로 디자인을 정리안해주면 걍 어글리 텍스트임....
const clockContainer = document.querySelector(".js-clock"),
dateTitle = clockContainer.querySelector(".currDate"),
clockTitle = clockContainer.querySelector(".currTime");
function getDate(){
const date = new Date();
const week = new Array ('[일]','[월]','[화]','[수]','[목]','[금]','[토]');
const year = date.getFullYear();
const month = date.getMonth()+1;
const day = date.getDay();
const dayName = week[date.getDay()];
dateTitle.innerText = `
${year}년 ${month <10 ? `0${month}` : month}월
${day < 10 ? `0${day}` : day}일
${dayName}
`;
}
function getTime(){
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clockTitle.innerText = `
${hours < 10 ? `0${hours}` : hours}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}
`;
}
function init() {
getDate();
getTime();
setInterval(getTime, 1000);
}
init();
ㄴㄴ
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트의 구현(사용) 방식 (0) | 2021.04.30 |
---|---|
[JavaScript] 폴더 안의 파일 갯수 세기 (length) (0) | 2021.03.09 |
[JavaScript] 미니(inline) 조건문 (0) | 2021.03.05 |
[JavaScript] .addEventListener (0) | 2021.03.05 |
[JavaScript] HTML,CSS 객체에 접근할때! (0) | 2021.03.05 |