실시간 시간 보이기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript 실시간 시간 보이기

페이지 정보

댓글 0건 조회 378회 작성일 2019-05-02 02:10

본문

자바스크립트로 구현된 실시간 시간 보여주는 소스입니다.

<body onload="printClock()">
<script>
function printClock() {
    
    var clock = document.getElementById("realtimeclock");            // 출력할 장소 선택
    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:0.7em;'>"+ 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>
<div style="font-size:5em; text-align:center;" id="realtimeclock"></div>


자료출처
https://bbaksae.tistory.com/23
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,337건 1 페이지

기술자료 목록
제목
공지 일반   17519  2001-08-31 11:52 ~ 2017-12-05 16:33  
2336 그누보드   68  2019-08-13 23:52 ~ 2019-08-14 00:02  
2335 HTML   66  2019-08-11 13:03  
2334 MySQL   158  2019-07-24 11:04  
2333 그누보드   170  2019-07-18 08:01 ~ 2019-07-18 08:44  
2332 HTML   168  2019-07-15 18:13 ~ 2019-07-15 22:48  
2331 PHP   411  2019-05-02 02:33 ~ 2019-05-02 02:38  
열람중 JavaScript   379  2019-05-02 02:10  
2329 그누보드   593  2019-04-25 09:02 ~ 2019-04-25 09:19  
2328 그누보드   597  2019-04-22 23:56  
2327 HTML   612  2019-04-16 11:40  
2326 영카트   608  2019-04-14 22:24  
2325 HTML   1044  2019-04-02 00:12 ~ 2019-04-02 01:17  
2324 그누보드   962  2019-03-22 14:25  
2323 전자결제   1601  2019-02-18 11:47  
2322 그누보드   1520  2019-02-16 01:51 ~ 2019-02-17 14:00  
2321 PHP   1534  2019-02-13 21:01  
2320 JavaScript   1459  2019-02-08 18:37 ~ 2019-02-08 19:32  
2319 그누보드   1522  2019-02-08 16:47 ~ 2019-02-08 16:54  
2318 그누보드   1561  2019-01-31 18:45 ~ 2019-01-31 18:52  

게시물 검색
계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
391
어제
1,239
최대
3,306
전체
5,003,695

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 032-679-3528   주소: 14526 경기도 부천시 옥산로168번길 34-1, 3층
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2019 해피정닷컴. All Rights Reserved.