간단한 디지탈 시계

  안녕하세요?
  오늘도 소스코드 분석을 하겠습니다. 오늘은 디지탈 시계인데요. 화면에 시간을 표시하면서 1초단위로 시계가 시간을 가리킵니다. 예제에 주석으로 설명을 붙여 놨으니 참고하시면서 봐주시기 바랍니다. 앞에서배운 Date객체에 시,분,초를 구하고 그것을 화면에 뿌려주는 형식으로 되어있습니다. 어렵지 않게 이해하시리라 생각됩니다. 그럼 소스를 보시죠.

<span id="liveclock" style="position:absolute;left:0;top:0;"></span>
<!-- 이곳에서 시계를 보여줄 위치를 설정 하세요 */
left:0;top:0 은 왼쪽에서 0픽셀, 위쪽에서 0 픽셀 떨어진 곳에 시계를 보여준다는 말입니다 -->

<script language="JavaScript">
<!--
function show5(){
        if (!document.layers&&!document.all&&!document.getElementById) // 크로스 브라우징 구현을 위해
        return

         var Digital=new Date()      // Date객체인 Digital을 선언
         var hours=Digital.getHours()  //  시간구하기
         var minutes=Digital.getMinutes()  // 분구하기
         var seconds=Digital.getSeconds()  // 초구하기

        var dn="PM"         // 오전,오후 AM PM정하기, 디폴트로 PM
        if (hours<12)       // 만약에 시간이 12시보다 작으면
        dn="AM"             // 오전이니까 dn=AM
        if (hours>12)       // 시간이 12시보다 크면
        hours=hours-12      // 예를들어 13이면 12를 빼서 1로 만들어줍니다.
        if (hours==0)       // 시간이 0시이면
        hours=12            // 시간은 12시로 표시

         if (minutes<=9)
         minutes="0"+minutes  // 분이 9보다 작으면 앞에 0을 하나 추가합니다. 그러니까 3분이면 03이 되겠죠.
         if (seconds<=9)
         seconds="0"+seconds  // 초도 똑같이 0을 추가해줍니다.
 
        //아래에서 원하는 형태대로 시계를 설정 하세요
        myclock="<font size='4' color=gray face='굴림' ><b>"+hours+":"+minutes+":" +seconds+"

"+dn+"</b></font>"    // myclock이라는 문자열을 HTML형식으로 표현한 것입니다. font의 size,즉 크기는 4이고

color 색깔은 gray회색이고 face 폰트는 굴림체라는 겁니다. 그리고 <b>는 bold,굵게 표현하라는 거지요. 그다음에

시간 분 초를 표시합니다.

        if (document.layers){ //NN 이면
                document.layers.liveclock.document.write(myclock)
                document.layers.liveclock.document.close()
        }
        else if (document.all) // IE 이면
        liveclock.innerHTML=myclock
        // 이 부분은 저도 잘 모르겠습니다. document.layers는 아마도 넷스케이프이면 그런뜻이고 document.all은

익스플로러이면 그런뜻인거 같습니다.
        else if (document.getElementById)
        document.getElementById("liveclock").innerHTML=myclock
        setTimeout("show5()",1000)   // 1000이면 1초를 얘기합니다. 그래서 1초마다 show5함수를 호출하라는 뜻

이지요.
}
window.onload=show5  // window가 onload,즉 열릴때, 로드될때 show5를 호출하라는 거니깐 맨처음 실행될때 show5

가 실행이 될겁니다.
//-->
</script>

<!-- 여기까지 입니다 -->

옆의 주석을 보면서 이해하시면 훨씬 빠르실 겁니다. 그럼 실행결과를 볼까요?

이렇게 실행이 되네요. 그럼 오늘은 여기까지 다음 시간에 다시 만나요!