실시간 시간 출력하기 > JS

본문 바로가기





WEBDEV
사이트 내 전체검색



실시간 시간 출력하기 > JS

실시간 시간 출력하기

페이지 정보

작성자 최고관리자 댓글 0건 조회 2,355회 작성일 18-02-07 00:26

본문


<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;
}


</script>


<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>




댓글목록

등록된 댓글이 없습니다.



회사소개
개인정보처리방침
서비스이용약관
모바일버전
그누보드5
Copyright © 소유하신 도메인. All rights reserved.