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

$(document).ready(function() {
    /*
        1. 시간 객체 가져오기.(시, 분, 초)
        2. text로 출력하기 .text()
        3. setInterval
    */

    function clock() {
        var time = new Date();

        var hours = time.getHours();
        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);

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

    $("nav div").on("click", function() {
        $(this).addClass("on").siblings().removeClass("on");

        //var i = $(this).index();

        // if(i === 0) {
        //     $("#container").css("backgroundImage", `url(images/bg_morning.jpg)`);
        // } else if(i === 1) {
        //     $("#container").css("backgroundImage", `url(images/bg_afternoon.jpg)`);
        // } else if(i === 2) {
        //     $("#container").css("backgroundImage", `url(images/bg_evening.jpg)`);
        // } else if (i === 3){
        //     $("#container").css("backgroundImage", `url(images/bg_night.jpg)`);
        // }
        
        // .css("속성","속성값")
        // .css("color","#ff0000")
        // .html()

        //var i = $(this).index(); // 텍스트 못 가져올 경우
        //var theme = $(this).text(); // 텍스트 가져와서 addClass()
        var theme = $(this).attr("data-theme"); // dataset으로 활용하기
        /*
            $("선택자").attr("속성") -> 해당 attribute의 속성값(value)을 가져올 수 있음
            $("선택자").attr(prop, val) -> 속성에 속성 값을 부여할 수 있음
        */

        //$("#container").removeClass(); // 모든 클래스가 다 지워짐
        // $("#container").addClass("container" + theme);
        //$("#container").addClass("container " + classList[i]);
        $("#container").css("backgroundImage", `url(images/bg_${theme}.jpg)`);
        $("figure").css("backgroundImage", `url(images/phone_${theme}.png)`);

        console.log(theme);
        
        

    });
});