ΛneOK v4 blog

일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.

# Side Menu
  • recentPost

  • popularPost

  • Archive

  • recentComment

Study/Html_Css

[백업] 시계 출력 웹페이지

2020. 11. 24., AneOK
728x90

주말에 시간이 조금 남아 무엇을 할까 고민 중에 예전 XP 시절에 바탕화면 시계가 있었던 것을 생각나서 이번에 회사 컴퓨터에 해보자는 생각에 만들었습니다. 하지만 비스타부터는 바탕화면에 웹페이지를 넣지 못하더군요. 그래도 만들기는 했는데 아쉽게도 그냥 홈피에 넣고 자리 비울 때 가동할까 합니다.

홈페이지 주소는 http://r5st.rf.gd/time/

 

소스는 부끄러워서 말을 못하겠네요. 원체 뒤죽박죽이라... 그냥 요점만.. 밑에 있습니다.

function printClock() {    
    var clock = document.getElementById("clock"); // 출력할 장소 선택
    var currentDate = new Date(); // 현재시간
    var calendar = currentDate.getFullYear() + "년 " + (currentDate.getMonth()+1) + "월 " + currentDate.getDate() + "일 " + getTodayLabel() + "요일"; // 현재 날짜 요일
    var amPm = '오전'; // 초기값 오전
    var currentHours = Zari(currentDate.getHours(),2); 
    var currentMinute = Zari(currentDate.getMinutes() ,2);
    var currentSeconds = Zari(currentDate.getSeconds(),2);    
    if(currentHours >= 12){ // 시간이 12보다 클 때 오후 로 세팅, 12를 빼줌 -- 24시 없음
        amPm = '오후';
        currentHours = Zari(currentHours - 12,2);
    }
    clock.innerHTML = "<div class='clearfix'><div class='ampm'>"+ 
        amPm+" &nbsp; </div><div class='time'>"+
        currentHours+":"+currentMinute+":"+currentSeconds+"</div></div><div class='date'>"+
        calendar+"</div>"; //날짜를 출력해 줌    
    setTimeout("printClock()",1000); // 1초마다 printClock() 함수 호출
}

function getTodayLabel() {    
    var week = new Array('일', '월', '화', '수', '목', '금', '토');    
    var today = new Date().getDay();
    var todayLabel = week[today];    
    return todayLabel;
}

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

나머지는 대충 사이즈 맞추고 하시면 됩니다.

font는 clockicons Fonts에 있습니다.

728x90