本文例項為大家分享了jquery實現簡單每週輪換日曆的具體程式碼，供大家參考，具體內容如下

先放出一張示例圖

在進入頁面時自動獲取本地時間並激活（示例為2020年9月8日），再點選左按鈕時倒退一週，右按鈕前進一週。滑鼠點選其中li標籤時啟用並在上方日期顯示。

一個很簡單的小日曆，主要是專案中經常會使用到就單獨拿出來寫個demo。具體思路是，獲取當前本地日期並推斷出週一和週日進而獲得本週全部的日期，真正存放的是一個長度為7的時間戳陣列，只是顯示的是日期，因為我認為利用時間戳做大部分處理比較直接簡單。如果有更好思路的小夥伴歡迎批評。下面放出程式碼。

HTML

<div id="app">
  <div class="title"></div>
  <div class="left"><</div>
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  <div class="right">></div>
</div>

CSS

<style>
  #app {
   width: 400px;
   height: 50px;
   margin: 200px auto;
   position: relative;
   color: darkgray;
  }
  .title {
   position: absolute;
   top: -50px;
   left: 0;
   width: 200px;
   height: 50px;
  }
  ul {
   list-style: none;
   background-color: blanchedalmond;
   width: 100%;
   display: block;
   padding: 0;
  }
  ul li {
   display: inline-block;
   width: 50px;
   height: 50px;
   text-align: center;
   line-height: 50px;
   cursor: pointer;
  }
  .left {
   position: absolute;
   top: 0;
   left: -50px;
   font-size: 35px;
   cursor: pointer;
  }
  .right {
   position: absolute;
   top: 0;
   right: -50px;
   font-size: 35px;
   cursor: pointer;
  }
  .on {
   color: darkorange;
  }
</style>

JS

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script>
  let now = new Date()
  let oneDay = 1000*60*60*24 // 一天的時間
  let timeArr = [] // 用來儲存每次迴圈真正時間戳的陣列
  let onDate = now.getTime() // 當前啟用的日期（有且僅有一個）
  init()
  // 點選後新增啟用樣式
  $('ul li').on('click',function() {
   acton($(this).index())
  })
  $('.left').on('click',function() {
   changeUl(0)
  })
  $('.right').on('click',function() {
   changeUl(1)
  })

  function init() {
   // 計算初始化時的週一和周天
   let monday = now.getTime() - (now.getDay() - 1)*oneDay
   let sunday = now.getTime() + (7 - now.getDay())*oneDay
   // 迴圈渲染本週
   for(let i = 0;i < 7;i++) {
    let nowDate = monday + oneDay * i
    $('ul li').eq(i).text(new Date(nowDate).getDate())
    timeArr.push(nowDate)
    if (nowDate === now.getTime()) { // 初始化時渲染標籤並激活當前本地日期和顯示
     acton(i)
    }
   }
  }
  
  // 判斷陣列中是否存在該日期並激活
  function judon() {
   if (timeArr.indexOf(onDate) !== -1) {
    $('ul li').eq(timeArr.indexOf(onDate)).addClass('on').siblings().removeClass('on')
   } else {
    $('ul li').each(function() {
     $(this).removeClass('on')
    })
   }
  }

  // 點選前後實現更換每週內容,1是前進一週,0是後退一週
  function changeUl(type) {
   for (let n = 0;n < 7;n++) {
    timeArr[n] = type ? timeArr[n] + oneDay*7 : timeArr[n] - oneDay*7
    $('ul li').eq(n).text(new Date(timeArr[n]).getDate())
   }
   judon()
  }
  
  // 啟用日期並顯示
  function acton(i) {
   let nowTitle = new Date(timeArr[i]);
   $('ul li').eq(i).addClass('on').siblings().removeClass('on');
   $('.title').text(`${nowTitle.getFullYear()}年${nowTitle.getMonth()+1}月${nowTitle.getDate()}日`);
   onDate = timeArr[i]
  }
</script>

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