210417 JavaScript jQuery Timmer Page 연습 (main2.js)

$(document).ready(function() {
    var time = new Date();
    var hours = time.getHours();

    function clock() {
        time = new Date();
        var mins = time.getMinutes();
        var secs = time.getSeconds();
        
        if(hours<10){ hours=`0${hours}`; }
        if(mins<10){ mins=`0${mins}`; }
        if(secs<10){ secs=`0${secs}`; }

        $(".hh").text(hours);
        $(".mm").text(mins);
        $(".ss").text(secs);
    }
    clock();

    setInterval(clock,500);

    function setTheme(item) { // 백그라운드 설정
        $("#container").css("backgroundImage", `url(images/bg_${item}.jpg)`);
        $("figure").css("backgroundImage", `url(images/phone_${item}.png)`);

        if(item === "moring" || item === "afternoon") {
            $("h1 .b").show();
            $("h1 .w").hide();
            $(".clock").css("color", "#000");
        } else if(item === "evening" || item === "night") {
            $("h1 .w").show();
            $("h1 .b").hide();
            $(".clock").css("color", "#fff");
        }
    }

    /*
        nav 클릭 했을 때 테마 바꾸기
    */
    var classList = ["morning", "afternoon", "evening", "night"];

    $("nav div").on("click", function() {
        $(this).addClass("on").siblings().removeClass("on");
        var theme = $(this).attr("data-theme"); // dataset으로 활용하기

        console.log(theme);

        setTheme(theme);      

    });

    /*
        페이지가 로드 되었을 때
        5시부터 10시 -> 아침, morning
        11시부터 16시 -> 낮, afternoon
        17시부터 22시 -> 저녁, evening
        23시부터 04시 -> 밤, night
        테마 지정하기
    */


    if(hours >= 5 && hours <= 10) {
        setTheme("morning");
    } else if(hours >= 11 && hours <= 16) {
        setTheme("afternoon");
    } else if(hours >= 17 && hours <= 22) {
        setTheme("evening");
    } else {
        setTheme("night");
    }


});