menu


자바스크립트로도 아날로그 시계를 만들 수 있다.
/*
 * 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();

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 오 ㅎㅎ 재밌네요 잘봤습니다

  2. 요즘엔 자바FX님이 나오셔서 자바로도 만들어 웹에 붙일 수 있다고 합니다만...
    ...도대체 자바 애플릿이랑 뭐가 다르냐는 소리도 들리는 것 같습니다.(....)

  3. RSS로 보니까 구글광고에 시계있는거 보고 자바스크립트가 뭐이리 현란한줄 알았뜸

  4. /* * http://jinh.tistory.com * @author JinH */function $(id) { return document.getElementById(id);}var r = 100; //clock_radiusvar hl = 3; //hour_hand_lengthvar ml = 5; //minute_hand_lengthvar sl = 5; //second_hand_lengthvar deg = Math.PI/180; //degreesdocument.write('<div id="clock"></div>');var cx = $('clock').scrollLeft;var cy = $('clock').scrollTop;$('clock').style.width = 2*r + 'px';$('clock').style.height = 2*r + 'px';$('clock').style.position = 'relative';$('clock').innerHTML += '<div id="center"></div>';$('center').style.position = 'absolute';$('center').innerHTML = '#';$('center').style.left = r + 'px';$('center').style.top = r + 'px';for (ii=1; ii<=60; ii++) { $('clock').innerHTML += '<div id="time'+ii+'"></div>'; $('time'+ii).style.position = 'absolute'; if (ii%60 == 0) { $('time'+ii).innerHTML = '#'; } else if (ii%15 == 0) { $('time'+ii).innerHTML = '='; } else if (ii%5 == 0) { $('time'+ii).innerHTML = '='; } else { $('time'+ii).innerHTML = '+'; } $('time'+ii).style.left = cx + r + Math.round(Math.cos((ii-15)*6/180*Math.PI)*r) + 'px'; $('time'+ii).style.top = cy + r + Math.round(Math.sin((ii-15)*6/180*Math.PI)*r) + 'px';}for (jj=1; jj<=hl; jj++) { $('clock').innerHTML += '<div id="hour_hand'+jj+'"></div>'; $('hour_hand'+jj).style.position = 'absolute'; $('hour_hand'+jj).innerHTML = '+';}for (jj=1; jj<=ml; jj++) { $('clock').innerHTML += '<div id="minute_hand'+jj+'"></div>'; $('minute_hand'+jj).style.position = 'absolute'; $('minute_hand'+jj).innerHTML = '+';}for (jj=1; jj<=sl; jj++) { $('clock').innerHTML += '<div id="second_hand'+jj+'"></div>'; $('second_hand'+jj).style.position = 'absolute'; $('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++) { $('hour_hand'+jj).style.left = Math.round(cx + r + hx * jj/hl) + 'px'; $('hour_hand'+jj).style.top = Math.round(cy + r + hy * jj/hl) + 'px'; } for (jj=1; jj<=ml; jj++) { $('minute_hand'+jj).style.left = Math.round(cx + r + mx *jj/ml) + 'px'; $('minute_hand'+jj).style.top = Math.round(cy + r + my *jj/ml) + 'px'; } for (jj=1; jj<=sl; jj++) { $('second_hand'+jj).style.left = Math.round(cx + r + sx *jj/sl) + 'px'; $('second_hand'+jj).style.top = Math.round(cy + r + sy *jj/sl) + 'px'; } setTimeout('clock_hands()',1000);}clock_hands();

    wrf 2010.10.24 20:56 신고   link delete reply

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH