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

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

2011. 12. 3. 10:55ㆍ개발/javascript Tip

자바스크립트 팁 ( javascript tip )
자바스크립트 아날로그 시계 소스

자바스크립트로 구현한 가장 기본적인 아날로그 시계 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Analog Clock on Javascript</title>
</head>

<body>
<script type="text/javascript">
//<![CDATA[
function clockPanel() {
 document.getElementById('clock').style.width = 2*r + 'px';
 document.getElementById('clock').style.height = 2*r + 'px';

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

for (ii=1; ii<=60; ii++) {
  document.getElementById('clock').innerHTML += '<div id="time'+ii+'"></div>';
  document.getElementById('time'+ii).style.position = 'absolute';
  if (ii%60 == 0) {
   document.getElementById('time'+ii).innerHTML = '12';
  } else if (ii%5 == 0 || ii%15 == 0) {
   document.getElementById('time'+ii).innerHTML = ii / 5;
  } else {
   document.getElementById('time'+ii).innerHTML = ' ';
  }
  document.getElementById('time'+ii).style.left = cx + r + Math.round(Math.cos((ii-15)*6/180*Math.PI)*r) + 'px';
  document.getElementById('time'+ii).style.top = cy + r + Math.round(Math.sin((ii-15)*6/180*Math.PI)*r) + 'px';
 }
 for (jj=1; jj<=hl; jj++) {
  document.getElementById('clock').innerHTML += '<div id="hour_hand'+jj+'"></div>';
  document.getElementById('hour_hand'+jj).style.position = 'absolute';
  document.getElementById('hour_hand'+jj).innerHTML = '*';
 }
 for (jj=1; jj<=ml; jj++) {
  document.getElementById('clock').innerHTML += '<div id="minute_hand'+jj+'"></div>';
  document.getElementById('minute_hand'+jj).style.position = 'absolute';
  document.getElementById('minute_hand'+jj).innerHTML = '*';
 }
 for (jj=1; jj<=sl; jj++) {
  document.getElementById('clock').innerHTML += '<div id="second_hand'+jj+'"></div>';
  document.getElementById('second_hand'+jj).style.position = 'absolute';
  document.getElementById('second_hand'+jj).innerHTML = '*';
 }
}

function clockHands() {
 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++) {
  document.getElementById('hour_hand'+jj).style.left = Math.round(cx + r + hx * jj/hl) + 'px';
  document.getElementById('hour_hand'+jj).style.top = Math.round(cy + r + hy * jj/hl) + 'px';
 }
 for (jj=1; jj<=ml; jj++) {
  document.getElementById('minute_hand'+jj).style.left = Math.round(cx + r + mx *jj/ml) + 'px';
  document.getElementById('minute_hand'+jj).style.top = Math.round(cy + r + my *jj/ml) + 'px';
 }
 for (jj=1; jj<=sl; jj++) {
  document.getElementById('second_hand'+jj).style.left = Math.round(cx + r + sx *jj/sl) + 'px';
  document.getElementById('second_hand'+jj).style.top = Math.round(cy + r + sy *jj/sl) + 'px';
 }
 setTimeout('clockHands()',1000);
}

function getClock() {
 r = 100;   //clock radius
 hl = 3;    //hour hand length
 ml = 5;    //minute hand length
 sl = 10;   //second hand length
 deg = Math.PI/180; //degrees
 cx = document.getElementById('clock').scrollLeft;
 cy = document.getElementById('clock').scrollTop;

clockPanel();
 clockHands();
}

window.onload = getClock;
//]]>
</script>

</body>
</html>

저작자표시 비영리

'개발 > javascript Tip' 카테고리의 다른 글

자주쓰는 자바스크립트 함수 모음 (0)	2011.12.03
자바스크립트 시간 날짜 계산 (0)	2011.12.03
자바스크립트 폼 리셋 (0)	2011.12.03
금액을 한글로 표기 해주는 스크립트 (0)	2011.12.03
마우스 오른쪽클릭방지 해제 스크립트 (0)	2011.12.03

스마트플렉스

스마트플렉스

태그

최근글

댓글

공지사항

아카이브

'개발 > javascript Tip' 카테고리의 다른 글

관련글

티스토리툴바