Jquery mousewheel, scroll(학습 60일차 TIL)

210907 오늘도 예제를 통해 html, css, jquery를 학습했다.
new Date();로 현재 시간을 구하고, 시/분/초를 각각 저장하여 실시간으로 시간을 보여주고, 실제 시간에 따라 background의 이미지가 변화하는 흐름이다.
그리고 제이쿼리는 변수가 var로 선언이 되어있다. 그러나 자바스크립트에서는 반드시 변수 선언시 const, let을 쓰자.

var timer = setInterval(function(){

  var now = new Date();
  var hr = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();

  //시간이 한 자리 수일 때 앞에 0 붙이기
  if (hr >=10) {
    hNum = hr;
  } else {
    hNum = "0"+hr;
  }

  //분이 한 자리 수일 때 앞에 0 붙이기
  if (min >=10) {
    mNum = min;
  } else {
    mNum = "0"+min;
  }

  //초가 한 자리 수일 때 앞에 0 붙이기
  if (sec >=10) {
    sNum = sec;
  } else {
    sNum = "0"+sec;
  }
  // 시간 출력
  $("p span").eq(0).text(hNum);
  $("p span").eq(1).text(mNum);
  $("p span").eq(2).text(sNum);

  },1000);

  var now = new Date();
  var hr = now.getHours();

  // 시간에 따라 화면 테마 변하기
  if (hr>=5 && hr<11) {
    $("#wrap").removeClass();
    $("#wrap").addClass("morning");
    $("nav li").removeClass();
    $("nav li").eq(0).addClass("on");
  } else if (hr>=11 && hr<16) {
    $("#wrap").removeClass();
    $("#wrap").addClass("afternoon");
    $("nav li").removeClass();
    $("nav li").eq(1).addClass("on");
  } else if (hr>=16 && hr<20) {
    $("#wrap").removeClass();
    $("#wrap").addClass("evening");
    $("nav li").removeClass();
    $("nav li").eq(2).addClass("on");
  } else if (hr>=20 && hr<5) {
    $("#wrap").removeClass();
    $("#wrap").addClass("night");
    $("nav li").removeClass();
    $("nav li").eq(3).addClass("on");
  }

  //클릭 시 테마 변경하기
  $("nav li").on("click",function(){
  var className = $(this).children("a").text();
  $("nav li").removeClass();
  $(this).addClass("on");
  $("#wrap").removeClass();
  $("#wrap").addClass(className);
});