下面是详细讲解JS实现简易日历效果的完整攻略。
1.准备工作
在开始之前，我们需要准备以下工作：
- 一个HTML文件，用于展示日历
- 一个CSS文件，用于美化页面
- 一个JS文件，用于实现日历功能
2.HTML结构
我们需要在HTML中添加以下结构：
<div class="calendar">
<div class="header">
<div class="month-picker">
<a href="#" id="prev-month"><</a>
<span id="current-month-year"></span>
<a href="#" id="next-month">></a>
</div>
</div>
<div class="weekdays">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="days"></div>
</div>
这个结构包含了一个日历的完整内容，我们需要在接下来的CSS样式中定义这些元素的样式。
3.CSS样式
在CSS样式中，我们需要定义以下内容：
- 整个日历的样式
- 头部月份选择器的样式
- 星期几的样式
- 日历日期的样式
示例代码：
.calendar {
width: 300px;
margin: 0 auto;
font-family: sans-serif;
}
.calendar .header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #d0d0d0;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.calendar .month-picker {
display: flex;
align-items: center;
}
.calendar .month-picker a {
text-decoration: none;
color: #333;
font-size: 24px;
margin: 5px;
cursor: pointer;
}
.calendar .month-picker span {
font-size: 20px;
}
.calendar .weekdays {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.calendar .weekdays div {
font-size: 14px;
font-weight: bold;
}
.calendar .days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
.calendar .days div {
width: calc(100% / 7);
text-align: center;
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
}
.calendar .days .today {
background-color: #f0f0f0;
}
.calendar .days .selected {
background-color: #009688;
color: #fff;
}
以上示例代码定义了日历的样式，包括头部、星期几和日期的样式，接下来我们需要在JS文件中实现日历的功能。
4.JS实现
在JS文件中，我们需要实现以下功能：
- 获取当月的日期列表，包括上月和下月的日期
- 渲染日期列表到页面上
- 实现上一个月/下一个月的按钮功能
- 实现点击某一天日期的功能
- 显示当前选中的日期
示例代码：
var calendar = {
today: new Date(),
currentMonth: null,
currentDate: null,
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: [
"January", "February", "March", "April",
"May", "June", "July", "August",
"September", "October", "November", "December"
],
// 初始化
init: function() {
this.currentMonth = this.today.getMonth();
this.currentDate = this.today.getDate();
this.renderCalendar();
document.getElementById("prev-month").addEventListener("click", function() {
calendar.prevMonth();
});
document.getElementById("next-month").addEventListener("click", function() {
calendar.nextMonth();
});
},
// 获取当月日期列表
getMonthData: function() {
var monthData = [];
// 获取当月第一天和最后一天
var firstDay = new Date(this.today.getFullYear(), this.currentMonth, 1);
var lastDay = new Date(this.today.getFullYear(), this.currentMonth + 1, 0);
// 获取上个月最后几天
for (var i = firstDay.getDay() - 1; i >= 0; i--) {
var date = new Date(this.today.getFullYear(), this.currentMonth, -i);
monthData.push({
date: date,
day: date.getDate(),
prevMonth: true
});
}
// 获取当月日期
for (var i = 1; i <= lastDay.getDate(); i++) {
var date = new Date(this.today.getFullYear(), this.currentMonth, i);
monthData.push({
date: date,
day: i,
thisMonth: true
});
}
// 获取下个月最前几天
var nextMonthDaysCount = 42 - monthData.length;
for (var i = 1; i <= nextMonthDaysCount; i++) {
var date = new Date(this.today.getFullYear(), this.currentMonth + 1, i);
monthData.push({
date: date,
day: i,
nextMonth: true
});
}
return monthData;
},
// 渲染日期列表
renderCalendar: function() {
var monthData = this.getMonthData();
// 渲染月份和年份
document.getElementById("current-month-year").innerHTML = this.months[this.currentMonth] + " " + this.today.getFullYear();
// 渲染每一天日期
var daysHtml = "";
for (var i = 0; i < monthData.length; i++) {
var day = monthData[i];
if (day.prevMonth) {
daysHtml += "<div class='prev-month date'>" + day.day + "</div>";
} else if (day.thisMonth) {
daysHtml += "<div class='date'>" + day.day + "</div>";
} else if (day.nextMonth) {
daysHtml += "<div class='next-month date'>" + day.day + "</div>";
}
}
document.querySelector(".days").innerHTML = daysHtml;
// 添加点击某一天日期的功能
var datesList = document.querySelectorAll(".date");
for (var i = 0; i < datesList.length; i++) {
datesList[i].addEventListener("click", function() {
calendar.selectDate(this);
});
}
// 显示当前选中的日期
var selectedDate = document.querySelector(".selected");
if (selectedDate) {
selectedDate.classList.remove("selected");
}
for (var i = 0; i < datesList.length; i++) {
if (datesList[i].getAttribute("data-date") == this.today.getFullYear() + "-" + (this.currentMonth + 1) + "-" + this.currentDate) {
datesList[i].classList.add("selected");
}
}
},
// 上一个月
prevMonth: function() {
this.currentMonth--;
if (this.currentMonth < 0) {
this.currentMonth = 11;
this.today.setFullYear(this.today.getFullYear() - 1);
}
this.renderCalendar();
},
// 下一个月
nextMonth: function() {
this.currentMonth++;
if (this.currentMonth > 11) {
this.currentMonth = 0;
this.today.setFullYear(this.today.getFullYear() + 1);
}
this.renderCalendar();
},
// 选择日期
selectDate: function(element) {
var date = element.getAttribute("data-date");
var dateArray = date.split("-");
this.today = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
this.currentMonth = this.today.getMonth();
this.currentDate = this.today.getDate();
this.renderCalendar();
}
};
calendar.init();
这段代码实现了整个日历的逻辑，包括获取当月日期列表、渲染日期列表、上一个月/下一个月的按钮功能、点击日期的功能和显示当前选中的日期。
5.示例说明
示例1
我们可以把上述代码复制到单独的HTML、CSS、JS文件中，并在浏览器中打开HTML文件，就可以看到一个简单的日历。
示例2
如果我们想在一个现有的网页中添加日历，可以把上述代码添加到现有网页的JS文件中，并调用init()函数来初始化日历。
<!DOCTYPE html>
<html>
<head>
<title>示例网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>示例网页</h1>
<div class="calendar"></div>
</div>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
var calendarContainer = document.querySelector(".calendar");
calendarContainer.innerHTML = calendar.init();
</script>
</body>
</html>
这段代码先将日历容器添加到HTML中，然后在JS中调用init()函数来初始化日历，最后将日历渲染到容器中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现简易日历效果 - Python技术站
微信扫一扫 
支付宝扫一扫 