현재시각 표시하는 시계 만들기 (date 객체)

안녕하세요, 오늘은 지금 시각을 표현할 수 있는 시계를 만들어 보려고 합니다.
자바스크립트로 만들 껀데 Date() 객체를 이용할 겁니다.
우선 아래 실행된 화면을 보시죠.

보시는 바와 같이 잘 동작하죠?
간단하게 설명을 하자면, 오전과 오후를 우측에 표시를 해주고,
한자리 수일때는 0을 채워주어 항상 두자리를 유지할 수 있도록 하였습니다.
마지막으로 초가 50초 이상일 때는 빨간색으로 색을 바꿔주는 기능도 있습니다.
그렇다면 소스를 한 번 보시죠!!!

<script>
function printClock() {
    
    var clock = document.getElementById("clock");            // 출력할 장소 선택
    var currentDate = new Date();                                     // 현재시간
    var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜
    var amPm = 'AM'; // 초기값 AM
    var currentHours = addZeros(currentDate.getHours(),2); 
    var currentMinute = addZeros(currentDate.getMinutes() ,2);
    var currentSeconds =  addZeros(currentDate.getSeconds(),2);
    
    if(currentHours >= 12){ // 시간이 12보다 클 때 PM으로 세팅, 12를 빼줌
    	amPm = 'PM';
    	currentHours = addZeros(currentHours - 12,2);
    }

    if(currentSeconds >= 50){// 50초 이상일 때 색을 변환해 준다.
       currentSeconds = '<span style="color:#de1951;">'+currentSeconds+'</span>'
    }
    clock.innerHTML = currentHours+":"+currentMinute+":"+currentSeconds +" <span style='font-size:50px;'>"+ amPm+"</span>"; //날짜를 출력해 줌
    
    setTimeout("printClock()",1000);         // 1초마다 printClock() 함수 호출
}

function addZeros(num, digit) { // 자릿수 맞춰주기
	  var zero = '';
	  num = num.toString();
	  if (num.length < digit) {
	    for (i = 0; i < digit - num.length; i++) {
	      zero += '0';
	    }
	  }
	  return zero + num;
}

<body>

<body onload="printClock()">
	<div style="border:1px solid #dedede; width:600px; height:250px; line-height:250px; color:#666;font-size:100px; text-align:center;" id="clock">
	</div>
</body>

자바스크립트에서 new Date(); 라는 내장 객체를 사용할 수 있습니다. 사용할 수 있는 메서드가 매우 많이 있지만, 그 중 가장 유용한 것들만 보여드리겠습니다.

getYear()	연도를 리턴합니다.
getMonth()	0에서 11사이의 정수 달을 리턴합니다. 1월=0, 12월=11
getDate()	한 달 내의 날짜를 리턴합니다.
getDay()	한 주 내의 요일의 수를 리턴합니다. 일요일=0
getHours()	0에서 23사이의 정수 시간을 나타냅니다.
getMinutes()	0에서 59까지의 정수 분을 나타냅니다.
getSeconds()	0에서 59까지의 정수 초를 나타냅니다.
getTime()	1970년 1월 1일 이후의 시간을 천분의 1초 단위로 리턴합니다.

- setTimeout("함수명","시간")을 입력하게 되면 시간마다 함수명에 해당하는 함수를 호출합니다.
- addZeros() 함수는 한자리 수일 때는 앞에 '0'을 붙여 줌으로써 시,분,초 어떠한 상황에서도 두자리수로 출력 되도록 도와주는 함수
- 현재시각이 12시 보다 클 때는 -12를 빼줌과 동시에 PM을 표시해줄 수 있도록 함

저작자표시

'컴퓨터 > 자바스크립트' 카테고리의 다른 글

alert창 줄바꿈 (2줄로 만들기) (0)	2016.08.11
JSON(JavaScript Object Notation) (1)	2016.06.23
.substring()과 .substr() (0)	2016.06.15
.toUpperCase(), .toLowerCase() (0)	2016.06.15
소수점 반올림, 올림, 버림, .0채우기 (0)	2016.06.11

QRD