[국비 18일차]javascript, 이미지 활용해 전자시계 만들기 !

<소개>

숫자 이미지를 활용해 전자시계를 만들어 봤다.

저 숫자들이 일반 number가 아니라 이미지를 썻다는 말인데

그것보다 배경이미지에 더 눈이 갈수밖에 없다는 사실 ... 아 ..

일반 흰색배경보다는 이게 훨신 나을거 같아서 한번 해봤는데 효과는 굉장했다.

전체 코드를 확인해 보자면,

<!DOCTYPE html>

<head>

<style>

img { width: 30px; }

.inline-block {

display: inline-block;

vertical-align: middle;

}

.large-text {

font-size: 2rem;

}

</style>

function twoDigit(num) {

return num < 10 ? '0' + num : String(num); // 4 --> '04', 15 --> '15'

}

function myDate(now) {

const week = '일월화수목금토';

return `${now.getFullYear()}-${twoDigit(now.getMonth() + 1)}-${twoDigit(now.getDate())}(${week[now.getDay() % 7]})`;

}

function myTime(now) {

return `${twoDigit(now.getHours())}:${twoDigit(now.getMinutes())}:${twoDigit(now.getSeconds())}`;

}

window.onload = () => {

setInterval(() => {

let now = new Date();

let dateStr = myDate(now);

document.getElementById('y1').src = `img/${dateStr[0]}.jpg`;

document.getElementById('y2').src = `img/${dateStr[1]}.jpg`;

document.getElementById('y3').src = `img/${dateStr[2]}.jpg`;

document.getElementById('y4').src = `img/${dateStr[3]}.jpg`;

document.getElementById('mm1').src = `img/${dateStr[5]}.jpg`;

document.getElementById('mm2').src = `img/${dateStr[6]}.jpg`;

document.getElementById('d1').src = `img/${dateStr[8]}.jpg`;

document.getElementById('d2').src = `img/${dateStr[9]}.jpg`;

document.getElementById('day').innerHTML = `${dateStr[10]}${dateStr[11]}${dateStr[12]}`; // 요일을 포함한 전체 날짜 문자열

let timeStr = myTime(now);

document.getElementById('h1').src = `img/${timeStr[0]}.jpg`;

document.getElementById('h2').src = `img/${timeStr[1]}.jpg`;

document.getElementById('m1').src = `img/${timeStr[3]}.jpg`;

document.getElementById('m2').src = `img/${timeStr[4]}.jpg`;

document.getElementById('s1').src = `img/${timeStr[6]}.jpg`;

document.querySelector('#s2').src = `img/${timeStr[7]}.jpg`;

}, 1000);

}

</script>

</head>

</body>

</html>

실력이 부족한지라 어려운 것은 사용하지 않고 배운 내용을 활용하여 만들었다.

일단 만들기전 먼제 생각해야될 부분은

이 시계의 형태를 대략적으로 생각해 보는 것이다

일반 전자시계는 00:00:00으로 돼있으니 이 형태를 생각하면서 html body부분을 만들어야 한다.

내가 만든 형태는

날짜요일 : 0000년 00월 00일 .요일

시간 : 00:00:00

으로 아주 직관적이고 기초적인 시계를 계획했다.

그래서 일단 body 부분을 보자면

</body>

아주 단순한 형태이다.

body에 background imag는 넣고싶으면 넣고 넣기 싫으면 안넣어도 된다.

id = y1 ~y4는 2024 년도는 나타나는 이미지 태그이고

그 밖에 있는 div들은 inline block으로 설정해서

이미지와 텍스트를 정렬하기 위해서 설정한것들이다.

이미지와 텍스트가 섞여있어서 그냥 아무 설정없이 하면 위치가 중구난방으로 이상하게 되기 때문에

<style>

img { width: 30px; }

.inline-block {

display: inline-block;

vertical-align: middle;

}

이렇게 설정할 필요가 있었다.

body 태그를 다시 보면

년, 월 , 일 만 일반 텍스트 표현 형식으로 만들어 진것을 볼수 있다.

왜 그러냐면 나머지 년도나 시간, 요일 등등은 프로그램에서 자동적으로 받을수 있는

요소들이라 그랬고 년,월,일은 그렇지 않기 때문에 텍스트로 표시 했다.

여기서 요일을 나타내는 (수)도 프로그램에서 자동으로 받는 부분이라

매일 요일이 자동적으로 바뀐다.

function twoDigit(num) {

return num < 10 ? '0' + num : String(num); // 4 --> '04', 15 --> '15'

}

<script>

이제 자바스크립트 요소로 가보면

이 twoDigit function은 주어진 숫자를 두 자리 문자열로 변환하는 간단한 함수이다.

예를 들자면 4는 '04'로, 숫자 15는 '15'로 2자리 문자열로 변환시켜 준다.

3항 연산자 활용, 삼항 연산자 (`? :`)

num < 10 ? '0' + num : 만약 num이 10보다 작으면 true가 되어 '0'과 num을 문자열로 연결한다.

예) num이 4일 경우 ㅡㅡ> '04'

: String(num) : false 라면 num을 String으로 변환;

예) num이 15일 경우 ㅡㅡ> '15'

function myDate(now) {

const week = '일월화수목금토';

return `${now.getFullYear()}-${twoDigit(now.getMonth() + 1)}-${twoDigit(now.getDate())}(${week[now.getDay() % 7]})`;

}

소개 : myDate 함수는 현재 날짜를 'YYYY-MM-DD(요일)' 형식의 문자열로 변환하는 함수이다.

javascript 내의 date 객체를 사용하여 년도, 월, 일, 및 요일을 계산한다.

요일 문자열

const week = '일월화수목금토'; 는 요일을 나타내는 문자열이다,

문자열 템플릿

${now.getFullYear()} 현재 년도를 4자리 숫자로 반환한다.

${twoDigit(now.getMonth() + 1) 현재 월을 두자리 숫자로 만들고, 1을 더해준다 (js 월은 0부터시작)

${twoDigit(now.getDate() 현재 일을 두자리 숫자로 반환.

(${week[now.getDay() % 7]}) 은 현재 요일을 한글로 반환 한다.

예 =)

const week = '일월화수목금토';

문자열의 각 문자는 인덱스 0 ~6임

get day() 메서드는 현재 날짜의 요일을 숫자로 반환한다.

0~6임.

week[now.getDay() % 7]

now.getDay()가 반환한 숫자를 week 문자열의 인덱스로

사용하여 해당 요일의 한글을 반환한다.

예2 )

오늘이 수요일이라면 now.getDay()는 3을 반환하고,

week[3]은 '수'를 반환한다.

function myTime(now) {

return `${twoDigit(now.getHours())}:${twoDigit(now.getMinutes())}:${twoDigit(now.getSeconds())}`;

}

설명

myTime 함수는 현재 시간을 'HH:MM' 형식의 문자열로 변환하는 함수이다.

Javascript의 'Date'개체를 사용하여 시,분,초를 계산하고 두자리 문자열로 변환하여 반환한다.

파라미터

: 'now' : javascript 'Date' 객체로 현재 날짜와 시간을 나타낸다.

반환값

: hh.mm 형식의 문자열을 반환한다.

동작원리

: gethours 시 , getminute 분, getSeconds 초

앞에 twoDigt은 두 자리 문자열로 변환.