jquery mousewheel,スクロール(学習60日目TIL)

18449 ワード
2回目のクエリ Date テキストリンク
210907今日もhtml、css、jqueryを例に学習しました.
new Date();現在時刻を求めて、それぞれ時刻/分/秒を記憶し、時間をリアルタイムで表示し、実際の時刻背景画像の変化傾向に基づいている.
また、Jクエリは変数をvarとして宣言します.ただし、JavaScriptでは、変数を宣言するときに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);
});
[問題解決]プログラマ-回転マトリクスボーダー[レベル2]
30日目-Kaprekar Split