本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。