[ 자바스크립트 ] 구버전용 벽시계

출처 : w3schools.com (영문)

각각의 변수가 정확히 뭘 의미하는지도 잘 모르겠고...
점들을 추가하고, 간격을 더 좁히면,
실선처럼 보이게 할 수도 있을 것 같긴 한데... 내 실력이... ㅠ.ㅠ
그냥 베껴온걸로 만족해야될 듯...

사용중인 브라우저에서, <canvas> 태그가 적용된다면, 아래 문서를 참고하시길. ...

☞ [자바스크립트] canvas ─ 벽시계

---

1 2 3 4 5 6 7 8 9 10 11 12

---

 
<style type="text/css">
div.dig, div.hour, div.min, div.sec { margin: 0; padding: 0; position: absolute; } 

div.hour, div.min, div.sec { width: 2px; height: 2px; font-size: 2px; } 

div.dig { padding-top: 10px; width: 30px; height: 30px; 
            text-align: center; font-family: arial,verdana,sans-serif; font-size: 10px; 
            color: gray; } 

div.hour { background: #ff0; } 

div.min { background: #6cf; } 

div.sec { background: #ccc; }
</style>
 

 
<table style="width:140px; margin: 0 auto; padding: 0; background-color: #407080;">
   <tbody>
      <tr>
         <td style="font-size: 10px;">
            <div style="width: 120px; height: 100px; position: relative; left: 58px; top: 50px;">
		 <div id="dig1" class="dig">1</div>
		 <div id="dig2" class="dig">2</div>
		 <div id="dig3" class="dig">3</div>
		 <div id="dig4" class="dig">4</div>
		 <div id="dig5" class="dig">5</div>
		 <div id="dig6" class="dig">6</div>
		 <div id="dig7" class="dig">7</div>
		 <div id="dig8" class="dig">8</div>
		 <div id="dig9" class="dig">9</div>
		 <div id="dig10" class="dig">10</div>
		 <div id="dig11" class="dig">11</div>
		 <div id="dig12" class="dig">12</div>

		 <div id="hour1" class="hour"></div>
		 <div id="hour2" class="hour"></div>
		 <div id="hour3" class="hour"></div>
		 <div id="hour4" class="hour"></div>

		 <div id="min1" class="min"></div>
		 <div id="min2" class="min"></div>
		 <div id="min3" class="min"></div>
		 <div id="min4" class="min"></div>
		 <div id="min5" class="min"></div>

		 <div id="sec1" class="sec"></div>
		 <div id="sec2" class="sec"></div>
		 <div id="sec3" class="sec"></div>
		 <div id="sec4" class="sec"></div>
		 <div id="sec5" class="sec"></div>
		 <div id="sec6" class="sec"></div>
            </div>
         </td>
      </tr>
   </tbody>
</table>
 

 
<script type="text/javascript"> 
/** Standard Scroll Clock by kurt.grigg@virgin.net **/ 

<!-- 
var 
H  = '....'.split(''), 
M = '.....'.split(''), 
S  = '......'.split(''); 

var 
Ypos = 0, 
Xpos = 0, 
Ybase = 8, 
Xbase = 8, 
dots = 12; 

function clock(){ 
    var 
    time = new Date (), 
    seconds = time.getSeconds(), 
    minutes = time.getMinutes(), 
    hours = time.getHours(); 

    var 
    sec = -1.57 + Math.PI * seconds/30, 
    min = -1.57 + Math.PI * minutes/30, 
    hrs = -1.57 + Math.PI * hours/6 + Math.PI * parseInt (minutes) / 360; 

    var n; 
    for ( n = 0; n < dots; ++n ){ 
        document.getElementById( "dig" + (n+1) ).style.top = 0 - 15 + 40 * Math.sin( -0.49 + dots + n/1.9 ).toString() + "px"; 
        document.getElementById( "dig" + (n+1) ).style.left = 0 - 14 + 40 * Math.cos( -0.49 + dots + n/1.9 ).toString() + "px";
    } 

    for ( n = 0; n < S.length; n++ ){ 
        document.getElementById( "sec" + (n+1) ).style.top = Ypos + n * Ybase * Math.sin(sec).toString() + "px"; 
        document.getElementById( "sec" + (n+1) ).style.left = Xpos + n * Xbase * Math.cos(sec).toString() + "px"; 
    } 

    for ( n = 0; n < M.length; n++){ 
        document.getElementById( "min" + (n+1) ).style.top = Ypos + n * Ybase * Math.sin(min).toString() + "px"; 
        document.getElementById( "min" + (n+1) ).style.left = Xpos + n * Xbase * Math.cos(min).toString() + "px"; 
    } 

    for ( n = 0; n < H.length; n++){ 
        document.getElementById( "hour" + (n+1) ).style.top = Ypos + n * Ybase * Math.sin(hrs).toString() + "px"; 
        document.getElementById( "hour" + (n+1) ).style.left = Xpos + n * Xbase * Math.cos(hrs).toString() + "px"; 
    } 

    setTimeout( "clock()", 50 ); 
}clock(); 

//--> 
</script>