Web/Javascript
[Javascript] 자바스크립트 실시간 시,분,초 시간 출력하기
나비와꽃기린
2016. 10. 28. 10:31
실시간을 표시해주는 소스이다.
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>