스티브홍쓰

자바스크립트 시계 소스 본문

자바스크립트/자바스크립트

자바스크립트 시계 소스

프로그 2010. 5. 28. 19:23
웹페이지에 시간을 표시해주는 시계 소스입니다. 
시간은 로컬 피씨의 시간으로 표시됩니다.(자바스크립트는 로컬브라우저에서 작동되는 프로그램이므로..)

개념 -  웹페이지 로드시 로컬피씨와의 시간을 동기화 한다. 초단위의 정보를 가져와서 동기화하여 분이 바뀌는 시점에서
           웹페이지의 시계 역시 동일하게 바뀌도록 로직을 구성한다. 


<html>
<head>
<script>
var now = new Date();
function watch(){
            
            hour = now.getHours();
            min = now.getMinutes();
            if(min<10)
                min = "0"+min;
            var ampm;
            if (now.getHours() <= 12) {
                apm = "오전";
            }else {
                apm = "오후";
            }
            
           document.getElementById("time").innerHTML = apm + " " + hour + ":" + min;

        }
           
        function startTimeInterval(){ //처음 분변경이후부터 60초마다 분변경
           watch();
            t = setInterval('watch()', 60000)
        }
        
        function initTime(){ //처음 로드시 남은 초를 계산하여 다음 분으로 변경을 위한 시점 설정
              
            watch();
            sec =( 60 - now.getSeconds())*1000;
            alert(sec)
            setTimeout(startTimeInterval,sec);
        }

   window.onload = function(){
            
             initTime();
   }
</script>
</head>
<body>
    <div class="clock">
      <h3>시계</h3>
      <p><span id="time">PM 12:00</span></p>
  </div>
</body>
</html>

저작자표시비영리변경금지
Tag
,
공유하기 링크
'자바스크립트/자바스크립트' Related Articles more
0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 Next