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

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

/*
 * 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();