clock

willy4202·2021년 12월 3일
0

시계 만들기

이번엔 시계를 만들었다.

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내를 저렇게 바꿔주면 된다

profile
같은 문제에 헤매지 않기 위해 기록합니다.

0개의 댓글