자바스크립트로 구현한 가장 기본적인 아날로그 시계 소스
<!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>
<div id="clock"></div>
</body>
</html>