jquery实现简单每周轮换的日历
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery实现简单每周轮换的日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现简单每周轮换日历的具体代码，供大家参考，具体内容如下
先放出一张示例图
在进入页面时自动获取本地时间并激活（示例为2020年9月8日），再点击左按钮时倒退一周，右按钮前进一周。鼠标点击其中li标签时激活并在上方日期显示。
一个很简单的小日历，主要是项目中经常会使用到就单独拿出来写个demo。具体思路是，获取当前本地日期并推断出周一和周日进而获得本周全部的日期，真正存放的是一个长度为7的时间戳数组，只是显示的是日期，因为我认为利用时间戳做大部分处理比较直接简单。如果有更好思路的小伙伴欢迎批评。狼蚁网站SEO优化放出代码。
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。