본문으로 바로가기

안녕하세요, 오늘은 지금 시각을 표현할 수 있는 시계를 만들어 보려고 합니다.
자바스크립트로 만들 껀데 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
getTime() 1970년 1월 1일 이후의 시간을 천분의 1초 단위로 리턴합니다.

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

댓글을 달아 주세요

  1. ㅇㅇ 2017.11.10 15:53

    div 영역만 표시되고 빈화면입니다ㅠ

    • 2017.12.18 22:09

      제가 방금해보니까요
      varcurrentHours = addZeros(currentDate.getHours(),2);

      이렇게하면 안떠요
      varcurrentHours = currentDate.getHours();
      근데 이렇게만 하면 떠요

      왜 그런진 모르겠어요..
      저도 저 소스에서 제 멋대로 바꿔서 쓰긴했는데 되더라고요!
      물론 2분이면 02분이라고 안나오고 2분이라고 나와요...

      글 작성자님 좋은 소스 감사합니다~




    • Most 2017.12.29 00:34

      varcurrentHours = addZeros(currentDate.getHours(),2);
      여기에서
      var currentHours = addZeros(currentDate.getHours(),2); 로 해야 뜹니다.

      코딩할 때 항상 오타 및 띄어쓰기 확인하세요~ 좋은 소스 감사합니다!

  2. 초보자 2018.01.09 13:26

    감사합니다

  3. 닉닉 2018.04.26 11:57

    잘보고 갑니다~

  4. j 2018.06.04 18:50

    자바 관련해서 공부하고 있는데 좋은 자료 감사합니다.

  5. 주워니 2018.07.02 09:41

    잘되네요 많이 배우고 갑니다. : )