자바 스크립트를 이용한 한글 시계

어디선가 봤던 한글 시계를 자바 스크립트로 작성해봤습니다.
제이쿼리를 쓰지 않았고 자바스크립트를 이제 막 접했을 때 작성한 프로그램이라서 부족한 부분이 많이 있습니다.

미리보기

Result 모바일에서는 실행이 안 될수 있습니다.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KoreanClock -Ballboy-</title>
<link rel="stylesheet" type="text/css" href="css/time.css">
<script type="text/javascript" src="js/time.js"></script>
</head>
<body>
    <div id="main">
        <div id="time-box" ></div>
    </div>
</body>
</html>

html에서는 단순히 시계를 보여주기 위한 기능 외에는 큰 기능이 없습니다.

Java Script

Java Script는 5개의 함수와 하나의 배열로 작성이 되어 있습니다.
- kors : 시간을 나타낼 한글문자 64개를 배열로 저장하는 변수
- dlf : 날짜(일)을 한글로 변환해주는 함수,
  정수로 받은 파라미터를 단순히 10의 자리와 1의 자리로 나누어 각각에 값에 한글을 매치하는 방식으로 숫자를 한글로 변환합니다.
- tl : 시간(시)를 한글로 변환해주는 함수, 작동원리는 dlf함수와 같습니다.
- qns_ch : 분과 초를 한글로 변환해주는 함수, 작동원리는 dlf, tl함수와 같습니다
- time : new Date()를 이용하여 현재의 날짜와 시간정보를 각각의 dlf, tl, qns_ch함수에 전달후 모든 정보를 취합하는 함수
  각각의 함수에서 얻어진 한글 정보는 kors배열과 내용 및 순서를 비교하여 글의 색을 바꾸어 출력합니다.
- window.onload : 프로그램을 최초로 실행 시키며 시간 데이터를 setInerval 함수를 사용하여 1초마다 업데이트 다시 출력을 합니다.

var kors = [
	'이', '삼', '십', '일', '이', '삼', '사', '오', '육', '칠', '팔', '구', '일',
	'오', '전', '후', '굿', '열', '한', '두', '세', '네', '다', '볼', '여', '섯', '일', '곱', '덟', '아', '홉', '시',
	'이', '삼', '사', '오', '십', '일', '이', '보', '삼', '사', '오', '육', '칠', '팔', '구', '분',
	'이', '삼', '사', '오', '십', '일', '이', '이', '삼', '사', '오', '육', '칠', '팔', '구', '초'
]

var dlf = function(d){
	var kor = "";
	if(d.ten != 0){
		switch(d.ten){
		case(2):
			kor = "이";
			break;
		case(3):
			kor = "삼";
			break;
		}
		kor += "십";
	}

	switch(d.one){
	case(1):
		kor += "일";
		break;
	case(2):
		kor += "이";
		break;
	case(3):
		kor += "삼";
		break;
	case(4):
		kor += "사";
		break;
	case(5):
		kor += "오";
		break;
	case(6):
		kor += "육";
		break;
	case(7):
		kor += "칠";
		break;
	case(8):
		kor += "팔";
		break;
	case(9):
		kor += "구";
		break;
	}
	kor += "일";
	return kor;
}

var tl = function(h){
	var kor = "오";
	if(h.o >= 12)
		kor += "후";
	else
		kor += "전";

	if(h.ten != 0)
		kor += "열";
	switch(h.one){
	case(1):
		kor += "한";
		break;
	case(2):
		kor += "두";
		break;
	case(3):
		kor += "세";
		break;
	case(4):
		kor += "네";
		break;
	case(5):
	case(6):
		if(h.one == 5)
			kor += "다섯";
		else
			kor += "여섯";
		break;
	case(7):
		kor += "일곱";
		break;
	case(8):
		kor += "여덟";
		break;
	case(9):
		kor += "아홉";
		break;
	}
	kor += "시";
	return kor;
}

var qns_ch = function(qc){
	var kor = "";

	if(qc.ten != 0){
		switch(qc.ten){
		case(2):
			kor += "이"; break;
		case(3):
			kor += "삼"; break;
		case(4):
			kor += "사"; break;
		case(5):
			kor += "오"; break;
		}
		kor += "십";
	}

	switch(qc.one){
	case(1):
		kor += "일"; break;
	case(2):
		kor += "이"; break;
	case(3):
		kor += "삼"; break;
	case(4):
		kor += "사"; break;
	case(5):
		kor += "오"; break;
	case(6):
		kor += "육"; break;
	case(7):
		kor += "칠"; break;
	case(8):
		kor += "팔"; break;
	case(9):
		kor += "구"; break;
	}

	if(qc.name == "m")
		kor += "분";
	else
		kor += "초";
	return kor;
}

var time = function(){
	var timeKor="";
	var t = new Date();
	var d = {};
	d.o = t.getDate();
	d.ten = Math.floor(d.o / 10);
	d.one = d.o % 10;
	var h = {}
	h.o = t.getHours();
	h.ten = Math.floor((h.o-12) / 10);
	h.one = (h.o-12) % 10;
	var m = {};
	m.o = t.getMinutes();
	m.name = "m";
	m.ten = Math.floor(m.o / 10);
	m.one = m.o % 10;
	var s = {};
	s.o = t.getSeconds();
	s.name = "s";
	s.ten = Math.floor(s.o / 10);
	s.one = s.o % 10;

	timeKor = timeKor + dlf(d) + tl(h) + qns_ch(m) + qns_ch(s);

	var timeBox = document.getElementById("time-box");
	var k = 0;
	var kor = "";

	for(var i = 0; i < 8; i++){
		for(var j = 0; j < 8; j++){
			if(timeKor[k] == kors[(i*8)+j]){
				kor = kor + "<span>" + kors[(i*8)+j] + "</span>";
				k++;
			} else {
				kor = kor + kors[(i*8)+j];
			}
		}
		if(i != 8){
			kor = kor + "<br>";
		}
	}
	timeBox.innerHTML = kor;
	kor = "";
}

window.onload = function(){
	//time();
	setInterval("time()", 1000);
};

css

@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	background-color:#3c3c3c;
}

# now {
	position:absolute;
	left:110px;
	top:15px;
	background-color:#3c3c3c;
	width:180px;
	height:40px;
	padding-top:2px;
	color:#FF0;
	font-size:25px;
	text-align:center;
	opacity:0.8;
}

# made {
	position:absolute;
	left:110px;
	top:374px;
	background-color:#3c3c3c;
	width:180px;
	height:32px;
	padding-top:2px;
	color:#FF0;
	font-size:20px;
	text-align:center;
	opacity:0.8;
}

# time-box {
	//position:absolute;
	//left:50px;
	//top:70px;
	//background-color:#3c3c3c;
	width:300px;
	height:285px;
	padding-top:15px;
	color:#AAA;
	text-align:center;
	font-size:25px;
	letter-spacing:8px;
	opacity:0.8;
}

# main {

	position:absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
}

span {
	color:#FF0;
	opacity:1;
}