jQueryは簡単なカレンダー効果を実現します。

本論文の例では、jQueryの簡単なカレンダー効果を実現するための具体的なコードを共有します。
カレンダーの効果は下図のようです。

css部分:

<style>
  * {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .main {
   width: 380px;
   height: 370px;
   margin: 30px auto;
   position: relative;
  }

  button {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: pink;
   font-size: 12px;
   text-align: center;
   line-height: 30px;
   border: none;
   position: absolute;
   color: #fff;
   outline: none;
   cursor: pointer;
   user-select: none;
  }

  .prev {
   top: 10px;
   left: 6%;
  }

  .next {
   top: 10px;
   right: 6%;
  }

  .nowTime {
   width: 90px;
   position: absolute;
   top: 15px;
   right: calc(50% - 45px);
   font-size: 14px;
   font-weight: bold;
   background: linear-gradient(to right, rgb(247, 149, 190), rgb(248, 204, 228));
   -webkit-background-clip: text;
   color: transparent;
  }

  .container {
   width: 350px;
   margin: 50px auto;
   border: 1px solid #ccc;
   position: absolute;
   top: calc(50% - 190px);
   left: calc(50% - 175px);

  }

  .container ul:first-of-type {
   background: rgb(245, 195, 195);
   color: rgb(43, 40, 40);
  }

  .container ul {
   width: 350px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   text-align: center;
  }

  .container li {
   width: 50px;
   height: 50px;
   text-align: center;
   line-height: 50px;
   cursor: pointer;
  }

  .container li:not(.disabled):hover {
   background: rgb(255, 174, 208);
  }

  li.disabled {
   background: rgb(252, 238, 238);
   cursor: not-allowed;
   color: rgb(206, 206, 206);
  }

  li.active {
   background: rgb(255, 206, 214);
  }
</style>

html部分：

<div class="main">
  <button class="prev">  </button>
  <p class="nowTime"></p>
  <button class="next">  </button>
  <div class="container">
   <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
   </ul>
   <ul class="content">

   </ul>
  </div>
</div>

js部分：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
  $(function () {
   let allDays = 0
   let now = new Date()
   let global_month = now.getMonth() + 1
   let global_year = now.getFullYear()
   let today = now.getDate()

   $('.prev').click(function () {
    now.setMonth(now.getMonth() - 1)
    calendar()
   })
   $('.next').click(function () {
    now.setMonth(now.getMonth() + 1)
    calendar()
   })

   function calendar() {
    $('.content').empty()
    let month = now.getMonth() + 1
    let year = now.getFullYear()

    //        
    switch (month) {
     case 1:
     case 3:
     case 5:
     case 7:
     case 8:
     case 10:
     case 12:
      allDays = 31
      break;
     case 4:
     case 6:
     case 9:
     case 11:
      allDays = 30
      break;
     default:
      //             
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
       allDays = 29
      } else {
       allDays = 28
      }

      break;
    }
    //                  li
    for (let i = 1; i <= allDays; i++) {
     let li = $('<li/>').text(i)
     //      li      
     if (i === today && year === global_year && month === global_month) li.addClass('active')
     $('.content').append(li)
    }

    //  ：                      
    now.setDate(1) //           
    let firstDay = now.getDay() //        
    for (let i = 0; i < firstDay; i++) { //            
     now.setDate(now.getDate() - 1) //             
     let li = $('<li/>').text(now.getDate()).addClass('disabled') //        
     $('.content').prepend(li)
    }
    now.setDate(now.getDate() + firstDay) //                      
    now.setDate(allDays)
    //  ：                  6       
    now.setDate(allDays) //            
    let lastDay = 6 - now.getDay() //      
    for (let i = 0; i < lastDay; i++) {
     now.setDate(now.getDate() + 1) //             
     let li = $('<li/>').text(now.getDate()).addClass('disabled') //        
     $('.content').append(li)
    }
    now.setDate(now.getDate() - lastDay) //                      
    now.setDate(1)

    $('.nowTime').html(now.getFullYear() + ' ' + (now.getMonth() + 1) + ' ')
   }

   calendar()
  })
</script>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。