本文例項為大家分享了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,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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。