[JavaScript] Moment.js를 이용하여 웹 시계 만들기

모니터에 띄워놓을 시계를 만들어달라는 업무를 받아서 제작하게 되었습니다.

글을 중간중간 수정하게되어서 시간이 안맞는점 양해 부탁드립니다

 

 

 

1.연도 표시. 월, 일, 요일 출력

2.KST, EST, EDT(썸머타임일 경우 붉은색으로) 출력

3.오후 8시부터는 해당 국가의 영역을 어둡게, 글자는 흰색으로

4.아침, 점심, 저녁을 나누어 이미지 출력

 

 

 

HTML, CSS, Jquery를 이용하여 제작하였고, AWS S3를 이용하여 호스팅했습니다.

특정 모니터에서만 이용할 예정이여서, 1920x1080 고정 해상도로 설정하고.(body)

화면을 구성하는 div요소에 position:absolute속성을 주고 top, left값을 조절하여 배치하였습니다.

moment.lang('ko', {
    weekdays: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],     //영문명이던 날짜를 한글로 변환
    weekdaysShort: ["일","월","화","수","목","금","토"],
});

function setTime()
{
    // 뉴욕이 썸머타임 인가?
    var isUsaEDT = moment().tz("America/New_York").isDST() === true;
    
    var now = new Date();

    var korNow = moment(now);
    var korYear = korNow.format('YYYY');
    var korDate = korNow.format('M월 D일(ddd)');    //시간을 원하는 형식으로 불러옴
    var korTime = korNow.format('HH:mm:ss');

    var usaNow = isUsaEDT ? moment(now).tz('EST').add("1", "h") : moment(now).tz('EST');
    var usaYear = usaNow.format('YYYY');
    var usaDate = usaNow.format('M월 D일(ddd)');
    var usaTime = usaNow.format('HH:mm:ss');
    
    console.log(korYear);

    //document.getElementById("ksy").innerHTML = ksy;
    $('.kor > .year')[0].innerHTML = korYear;
    $('.kor > .zone')[0].innerHTML = '(KST)';
    $('.kor > .date')[0].innerHTML = korDate;
    $('.kor > .time')[0].innerHTML = korTime;

    $('.usa > .year')[0].innerHTML = usaYear;
    $('.usa > .zone')[0].innerHTML = isUsaEDT ? '(EDT)' : '(EST)';
    $('.usa > .date')[0].innerHTML = usaDate;
    $('.usa > .time')[0].innerHTML = usaTime;

    var korSeven = korNow.hours();
    var usaSeven = usaNow.hours();

    if (6 <= korSeven && korSeven<10)
    {
        $(".kor").css("background-color","white");
        $(".kor").css("color","black");
        $(".kor > .sunrise")[0].innerHTML = '<img src="./sun/morning.PNG">';

    }
    else if (10 <= korSeven && korSeven < 20)
    {
        $(".kor").css("background-color","white");
        $(".kor").css("color","black");
        $(".kor > .sunrise")[0].innerHTML = '<img src="./sun/afternoon.PNG">';
    }
    else
    {
        $(".kor").css("background-color","#353535");  
        $(".kor").css("color","white");
        $(".kor > .sunrise")[0].innerHTML = '<img src="./sun/night.PNG">';
    }
    
    if (6 <= usaSeven && usaSeven < 10)
    {              
        $(".usa").css("background-color","white");
        $(".usa").css("color","black");
        $(".usa > .sunrise")[0].innerHTML = '<img src="./sun/morning.PNG">';
    }
    else if (10 <= usaSeven && usaSeven < 20)
    {
        $(".usa").css("background-color","white");
        $(".usa").css("color","black");
        $(".usa > .sunrise")[0].innerHTML = '<img src="./sun/afternoon.PNG">';
    }
    else
    {
        $(".usa").css("background-color","#353535");  
        $(".usa").css("color","white");
        $(".usa > .sunrise")[0].innerHTML = '<img src="./sun/night.PNG">';
    }
    
    function init() {
    setTime();

    var tick = new Date();
    setInterval(() => {
        var now = new Date();
        if (now.getSeconds() != tick.getSeconds()) {
            setTime();
            tick = now;
        }
    }, 30/1000);	//두 개의 모니터에 띄웠는데, 서로 박자가 안맞아서 조절
}

init();