clock

시계 만들기

이번엔 시계를 만들었다.

setInterval과 setTimeout을 이용해서다

먼저 setInterval은 몇 초마다 함수를 반복해서 실행하는 코드다 즉

<script>
function hi(){
	console.log("hi!");
}

setInterval(hi, 3000);
</script>

이렇게 입력하면 hi!라는 텍스트가 3초마다 실행되는 것을 확인할 수 있다.

즉 앞이 함수, 뒤가 밀리세컨드초를 뜻한다.

setTimeout은 조금 다르다.
해당 코드는 언제 시작할지를 알려주는 셈이다

function hi(){
	console.log("hi!");
}

setTimeout(hi, 3000);

이렇게 설정해두면 3초뒤에 한번 hi!가 실행되고 끝이다.

이 두가지를 잘 구분하길 바란다.

날짜 부르기

이어서 시계를 만들려면 날짜 데이터가 필요한데 이는 자바에서 자체적으로 제공하고 있다.

const date = new Date()를 실행하고
date.getDate()를 이어서 입력하면
해당 날짜가 등자한다

오늘이 12월 4일이니 정확하다.
이런 식으로 getHours, getSceonds 등을 활용하면 시계를 만들 수 있다.

우선 이 방식을 활용해 콘솔에서 작동하는 시계를 구상해보자

<script>
	const date = new Date();
    console.log(date.getHours(),date.getMinutes(),date.getSeconds());
</script>

우선 콘솔창에서 실행했을때 시간, 분, 초가 나오고 있다.
여기에 1초마다 시계를 업데이트 하고 싶다면
setInterval을 활용하면 된다.
식은 다음과 같다.

<script>
function getClock(){
const date = new Date();
console.log (date.getHours(),date.getMinutes(),date.getSeconds());
}

setInterval(getClock, 1000);
</script>

자 이제 콘솔에서 정상적으로 불러오는 법을 알았으니,

시계가 들어갈 자리를 만들어주도록 하자,

우선 새로운 js 폴더와 파일을 만들어주고 따로 보관해두자
시계의 스크립트는 clock.js로 하고 js라는 폴더에 정리했다

이후 html에서

<h2 id = "clock">00:00</h2>

<script srv = "js/clock.js">
</script>

이렇게 해두면 새롭게 html에 적용되고, 해당 id 값을 잘 정리해두도록 하자

이후 clock.js를 열고 코딩하면 다음과 같다.

<script>
const clock = document.querySelector("#clock");

function getClock(){
	const date = new Date();
	clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock();
setInterval(getClock,1000);
</script>

그 결과는 다음과 같다.

이제 우린 시계를 가질 수 있다!
그런데 시계를 보면 1초대일땐 01로 표시되지 않고
그냥 1로 표시되는 것을 발견했다.

불편하다.

항상 모든 칸에 균일하게 들어맞았으면한다.

이때 필요한 것은 padStart();다.

스트링.padStart(몇번까지, "들어갈 것")이다
즉 아래와 같은 경우도가능하다.

이를 이용하면 1초대일땐 0을 끼워넣는 것이 가능하다.

식을 바꿔보자

<script>
function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
</script>

시계에선 10의자리까지만 필요하고 빈자리는 0으로 메꾸면 되니 해당 식으로 코드를 짜준다면 된다.

이때, 벡틱을 사용해서 문자를 표현하기 때문에
innerText내를 저렇게 바꿔주면 된다