자바스크립트로도 아날로그 시계를 만들 수 있다.
/*
* 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 |
| 입대일 전역일 계산기 (51) | 2009.12.26 |
| 자바스크립트 아날로그 시계 (8) | 2009.02.17 |
| 유닉스 시간, 곧 1234567890에 이를 듯 (0) | 2009.02.10 |
| 전투 시뮬레이터 (13) | 2009.01.01 |
| 그림어울 자바스크립트 (2) | 2008.12.22 |
| 2010학년도 대학수학능력시험 D-Day 카운터 (5) | 2008.11.13 |
오 ㅎㅎ 재밌네요 잘봤습니다
리플 감사합니다^^
요즘엔 자바FX님이 나오셔서 자바로도 만들어 웹에 붙일 수 있다고 합니다만...
...도대체 자바 애플릿이랑 뭐가 다르냐는 소리도 들리는 것 같습니다.(....)
읽는 것만으로 머리가 아파오네요.
RSS로 보니까 구글광고에 시계있는거 보고 자바스크립트가 뭐이리 현란한줄 알았뜸
천하의 옐도 감히 하지 못한다는 RSS를 이용한 낚시!?
/* * 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();
아니, 내 블로그 리플에다 테스트 하지 마세요.