-
[JS/DOM] 바닐라 자바스크립트로 전자시계 구현하기 (날짜/시간 출력)Frontend 2019. 4. 2. 11:52
오늘은 간단하게 자바스크립트를 이용하여 시계를 만들어보려고 한다.
먼저 HTML과 CSS 코드는 다음과 같다.
<HTML>
<div class="clock"> <div class="time_box"> <span class="txt_lg" id="hours"></span> <span class="mark">:</span> <span class="txt_lg" id="min"></span> <span class="mark02">.</span> <span class="txt_sm" id="sec"></span> </div> <div class="date_box"> <span id="month"></span> <span class="point">.</span> <span id="date"></span> <span class="point">.</span> <span id="year"></span> <span id="day"></span> </div> </div><CSS>
* { box-sizing: border-box; } .clock { width: 300px; height: 300px; margin: auto; padding-top: 75px; background: #000; text-align: center; } .clock .time_box { width: 100%; padding-left: 10px; } .clock span { color: #fff; } .txt_lg { font-size: 75px; } .txt_sm { font-size: 20px; } .date_box { font-size: 15px; } #day { display: block; margin-top: 5px; } .mark { display: inline-block; vertical-align: top; height: 100px; margin-left: 1px; line-height: 94px; font-size: 55px; } .mark02 { display: inline-block; margin-left: -3px; }우리가 제일 먼저 해야할 것은 현재의 시간을 가지고 오는 것이다.
var today = new Date()그리고 시, 분, 초, 연, 월, 일의 정보는 다음과 같이 가지고 올 수 있다.
var dayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] var hh = today.getHours() // 시간 var mm = today.getMinutes() // 분 var ss = today.getSeconds() // 초 var YY = today.getFullYear() // 연도 var MM = today.getMonth()+1 // 월 var DD = today.getDate() // 일 var dd = dayList[today.getDay()] // 요일여기서 중요한 포인트)
1. Month는 1을 더해주어야 된다는 점.
2. 요일은 일요일: 0 ~ 토: 6 이라는 숫자를 가져오기 때문에
요일 배열을 만들어서 배열의 인덱스 번호로 가져와야 된다는 점.
그리고 나는 시, 분, 초가 1자리 수인 경우에 앞에 0을 붙여 2자리수로 만들어주고 싶었다.
그래서 다음과 같은 함수를 만들었다.
function addZero(num) { return (num < 10 ? '0'+num : ''+num) }숫자가 10보다 작으면 앞에 '0'을 붙이고 10보다 크면 ''를 붙여서 string 타입으로 return시켜주는 함수이다.
그래서 이걸 다시 적용해보면
var today = new Date() var dayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] var hh = addZero(today.getHours()) var mm = addZero(today.getMinutes()) var ss = addZero(today.getSeconds()) var YY = today.getFullYear() var MM = today.getMonth()+1 var DD = today.getDate() var dd = dayList[today.getDay()].toUpperCase()이렇게된다.
요일은 대문자로 출력하고 싶어서 .toUpperCase()를 같이 적어주었다.
이제 이렇게 가져온 값들을 원하는 태그에 넣기만 하면 된다.
document.getElementById('hours').innerText = hh document.getElementById('min').innerText = mm document.getElementById('sec').innerText = ss document.getElementById('month').innerText = MM document.getElementById('date').innerText = DD document.getElementById('year').innerText = YY document.getElementById('day').innerText = dd여기까지 하면 이제 현재 시간 값들이 자동으로 들어가 출력되는 것을 볼 수 있다.
그러나!
여기까지 하면 오직 "페이지가 처음 로드됐을 때 / 새로고침했을 때"만
시간이 출력되게 된다.
우리는 실시간으로 시간을 출력하는게 목적이니까
setInterval() 함수를 사용하여 1초에 한 번씩 시계를 호출해야한다.
var clockStart = setInterval(function() { var today = new Date() var dayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] var hh = addZero(today.getHours()) var mm = addZero(today.getMinutes()) var ss = addZero(today.getSeconds()) var YY = today.getFullYear() var MM = today.getMonth()+1 var DD = today.getDate() var dd = dayList[today.getDay()].toUpperCase() document.getElementById('hours').innerText = hh document.getElementById('min').innerText = mm document.getElementById('sec').innerText = ss document.getElementById('month').innerText = MM document.getElementById('date').innerText = DD document.getElementById('year').innerText = YY document.getElementById('day').innerText = dd function addZero(num) { return (num < 10 ? '0'+num : ''+num) } }, 1000)(setInterval에 적혀져있는 1000은 1000ms로 즉, 1s를 말한다.)
시계 완성!
: .. .반응형'Frontend' 카테고리의 다른 글
[jQuery] 스크롤이 몇 퍼센트 움직였는지 구하는 방법 (0) 2019.04.04 [JS/DOM] 바닐라 자바스크립트로 스톱워치(STOP WATCH)구현하기 (10) 2019.04.04 [JS/DOM] 바닐라 자바스크립트로 Tab 탭 구현하기 (7) 2019.04.02 [CSS] :before, :after에 counter()를 사용하여 숫자 리스트 표현하기 (0) 2019.03.24 [JS/DOM] 바닐라 자바스크립트로 select태그 option 동적으로 생성, 삭제하기 / 특정 옵션 선택하기 (2) 2019.03.24 COMMENT