자바스크립트 아날로그 시계

자바스크립트로도 아날로그 시계를 만들 수 있다.

/*
 * http://jinh.tistory.com
 * @author JinH
 */
function getID(id) {
	return document.getElementById(id);
}

var r = 100;	//clock_radius
var hl = 3;	//hour_hand_length
var ml = 5;	//minute_hand_length
var sl = 5;	//second_hand_length

var deg = Math.PI/180;	//degrees

document.write('<div id="clock"></div>');
var cx = getID('clock').scrollLeft;
var cy = getID('clock').scrollTop;
getID('clock').style.width = 2*r + 'px';
getID('clock').style.height = 2*r + 'px';

getID('clock').style.position = 'relative';
getID('clock').innerHTML += '<div id="center"></div>';
getID('center').style.position = 'absolute';
getID('center').innerHTML = '#';
getID('center').style.left = r + 'px';
getID('center').style.top = r + 'px';

for (ii=1; ii<=60; ii++) {
	getID('clock').innerHTML += '<div id="time'+ii+'"></div>';
	getID('time'+ii).style.position = 'absolute';
	if (ii%60 == 0) {
		getID('time'+ii).innerHTML = '#';
	} else if (ii%15 == 0) {
		getID('time'+ii).innerHTML = '=';
	} else if (ii%5 == 0) {
		getID('time'+ii).innerHTML = '=';
	} else {
		getID('time'+ii).innerHTML = '+';
	}
	getID('time'+ii).style.left = cx + r + Math.round(Math.cos((ii-15)*6/180*Math.PI)*r) + 'px';
	getID('time'+ii).style.top = cy + r + Math.round(Math.sin((ii-15)*6/180*Math.PI)*r) + 'px';
}
for (jj=1; jj<=hl; jj++) {
	getID('clock').innerHTML += '<div id="hour_hand'+jj+'"></div>';
	getID('hour_hand'+jj).style.position = 'absolute';
	getID('hour_hand'+jj).innerHTML = '+';
}
for (jj=1; jj<=ml; jj++) {
	getID('clock').innerHTML += '<div id="minute_hand'+jj+'"></div>';
	getID('minute_hand'+jj).style.position = 'absolute';
	getID('minute_hand'+jj).innerHTML = '+';
}
for (jj=1; jj<=sl; jj++) {
	getID('clock').innerHTML += '<div id="second_hand'+jj+'"></div>';
	getID('second_hand'+jj).style.position = 'absolute';
	getID('second_hand'+jj).innerHTML = '+';
}
function clock_hands() {
	var h = new Date().getHours();
	var m = new Date().getMinutes();
	var s = new Date().getSeconds();
	var hx = Math.cos((h-3)*30*deg + m/2*deg)*r*0.8*hl/ml;	//hour_hand_x
	var hy = Math.sin((h-3)*30*deg + m/2*deg)*r*0.8*hl/ml;	//hour_hand_y
	var mx = Math.cos((m-15)*6*deg)*r*0.8;				//minute_hand_x
	var my = Math.sin((m-15)*6*deg)*r*0.8;				//minute_hand_y
	var sx = Math.cos((s-15)*6*deg)*r*0.8;				//second_hand_x
	var sy = Math.sin((s-15)*6*deg)*r*0.8;				//second_hand_y

	for (jj=1; jj<=hl; jj++) {
		getID('hour_hand'+jj).style.left = Math.round(cx + r + hx * jj/hl) + 'px';
		getID('hour_hand'+jj).style.top = Math.round(cy + r + hy * jj/hl) + 'px';
	}
	for (jj=1; jj<=ml; jj++) {
		getID('minute_hand'+jj).style.left = Math.round(cx + r + mx *jj/ml) + 'px';
		getID('minute_hand'+jj).style.top = Math.round(cy + r + my *jj/ml) + 'px';
	}
	for (jj=1; jj<=sl; jj++) {
		getID('second_hand'+jj).style.left = Math.round(cx + r + sx *jj/sl) + 'px';
		getID('second_hand'+jj).style.top = Math.round(cy + r + sy *jj/sl) + 'px';
	}
	setTimeout('clock_hands()',1000);
}
clock_hands();

'기록 #01: 컴퓨터' 카테고리의 다른 글

워드프로세서 1급 실기 공략집  (11)	2011.04.22
구글 비트박스  (1)	2010.12.13
2012 수능 디데이 카운터  (12)	2010.11.19
읍참마속  (3)	2010.04.07
애플사의 전자제품과 개발중인 차세대 제품들  (4)	2010.03.17
입대일 전역일 계산기  (53)	2009.12.26
자바스크립트 아날로그 시계  (8)	2009.02.17
유닉스 시간, 곧 1234567890에 이를 듯  (0)	2009.02.10
전투 시뮬레이터  (14)	2009.01.01
그림어울 자바스크립트  (2)	2008.12.22
2010학년도 대학수학능력시험 D-Day 카운터  (5)	2008.11.13