본문 바로가기
Web/Javascript

[Javascript] 자바스크립트 실시간 시,분,초 시간 출력하기

by 나비와꽃기린 2016. 10. 28.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



실시간을 표시해주는 소스이다.

setInterval()이라는 함수를 사용하여 1초마다 실시간으로 시간을 구해주는데


setInterval()이란 무엇일까?



setInterval()은 ~하는 함수로 setInterval(function(){...} , 지연시간); 으로 사용한다.

지정한 function을 중지하기 위해서는 clearInterval(function())을 사용하면 된다.


시간에 관련된 함수로 일정 간격 반복을 위해 sertInterval()을 사용할 수 있지만,

시간지연을 위해서는 setTimeout()이라는 함수도 있어서 setTimeout() 함수를 사용해서 자기호출 방식을 사용한다면 setInterval() 처럼 구현이 가능하다.


하지만 보통 setInterval() 을 사용하며 setInterval()은 

보통 일정 시간 간격으로 배너광고를 보여줘야 하는 경우나

실시간 화면 출력등을 위해 사용되어 진다.


(예제1)


<!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" lang="ko" xml:lang="ko">
 <head>
  <title> new document </title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
 </head>
<script type="text/javascript">
<!--
    setInterval("dpTime()",1000);
    function dpTime(){
       var now = new Date();
        hours = now.getHours();
        minutes = now.getMinutes();
        seconds = now.getSeconds();
 
        if (hours > 12){
            hours -= 12;
        ampm = "오후 ";
        }else{
            ampm = "오전 ";
        }
        if (hours < 10){
            hours = "0" + hours;
        }
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
document.getElementById("dpTime").innerHTML = ampm + hours + ":" + minutes + ":" + seconds;
    }
//-->
</script>
 
<span id="dpTime">오후 01:44:40</span>
 <body>
  
 </body>
</html>