오늘은 자바스크립트를 활용해
홈페이지에 '시계'를 출력해볼 것이다.
HTML 요소와 Javascript를 활용해 시계 만들어보기.
순서는 아래와 같다.
1. HTML 파일에 시계를 출력할 태그를 생성하고 id 값을 지정한다.
2. 자바스크립트를 통해 해당 id 로 요소를 가져와 변수에 저장한다.
3. new DATE( )를 사용해 시간을 받고, 계속적으로 갱신해준다.
4. 시간을 출력할 때 1자릿수를 2자릿수로 바꿔준다.
그럼 바로 위와 같은 순서로 진행해보자.
1. 우선 HTML 파일에 시계를 출력할 태그를 만들고 id 값을 지정해준다.
<body>
<h1 id="clock"></h1>
<script src="clock.js"></script>
</body>2. 자바스크립트 파일에서 id 값을 query.Selector()을 활용해 가져온다.
const clock = document.querySelector("#clock");3. 함수를 만들고 new Date( ) 객체를 활용해 시간을 받아온다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
}4. getHours( ), getMinutes( ), date.getSeconds( ) 메소드로 각각의 값을 Text로 추가해준다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${00 + date.getSeconds()}`;
}5. 매초마다 getClock( ) 함수를 1초마다 갱신해서 업로드하기 위해 setInerval( )을 사용한다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${00 + date.getSeconds()}`;
}
setInterval(getClock, 1000);그런데 여기서 문제가 발생한다.
우선 지금까지 한 결과를 살펴보면 아래와 같다.
오후 5시 2분 46초를 나타낸다.
그런데 한 자릿수만 나타내니 시계가 뭔가 없어보인다.
이것을 2자릿수로 바꿔주도록 하겠다.
그리고 다른 문제는 위와 같이 작성했을 때
가장 처음 브라우저가 자바스크립트 setInterval(getClock, 1000)을 읽어들일 때
1초의 딜레이가 발생한다.
딜레이를 없애고자 setInterval( ) 함수 앞에 getClock( ) 함수를 실행해준다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${00 + date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);그러면 딜레이는 해결했고,
이제 2자릿수를 출력해보도록 하자.
이때 자바스크립트에서 제공하는 기능을 사용하려고 한다.
자바스크립트 시계 두 자릿수 만들기.
자바스크립트가 한 자릿 수의 String 값을 만났을 때,
앞에 "0"을 추가해 두 자릿수로 만들어주면 된다.
나는 여기서 String에서 쓸 수 있는 function인
padStart( )를 사용하겠다.
padStart( )는,
만약에 2라는 숫자(String 값)를 세 자릿 수로 만드려고 하는데
앞에 '0'을 추가해서 만들고싶다고 할 때,
아래와 같이 작성을 한다.
2라는 숫자를 3 자릿수로 만들 것인데
만약에 3 자릿수가 아니라면 "0"을 추가하여 만든다.
라는 뜻이다.
기능은 String이 시작하는 부분에 패딩을 설정한 값으로 채워주는 function인 것이다.
"2".padStart(3, "0");이 function에 좋은 점이
"12".padStart(2, "0"); 일 때
12는 이미 2 자릿수이므로 0을 추가하지 않는다는 것이다.
시계를 만들 때 완전 적합한 function 이다!!
그럼 바로 적용해보자.
6. date.get -- ( )으로 가져왔던 것들을 변수로 분리한다.
hours, min, sec으로 변수 생성해 값을 넣었다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
const hours = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();
clock.innerText = `${hours}:${min}:${sec}`;
}
getClock();
setInterval(getClock, 1000);7. 위에서 언급헀던 padStart( ) fucntion은 String일 때 사용가능하니 String 값으로 변환한다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
const hours = String(date.getHours());
const min = String(date.getMinutes());
const sec = String(date.getSeconds());
clock.innerText = `${hours}:${min}:${sec}`;
}
getClock();
setInterval(getClock, 1000);8. String으로 변환 후 padStart( )를 사용해 두 자릿수로 만들어준다.
const clock = document.querySelector("#clock")
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const min = String(date.getMinutes()).padStart(2, "0");
const sec = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${min}:${sec}`;
}
getClock();
setInterval(getClock, 1000);짜잔. 두자릿수로 출력이 되었다.
댓글