下面是详细讲解“js css+html实现简单的日历”的完整攻略：
简介
在网页中添加日历是非常常见的需求。我们可以通过使用 HTML、CSS 和 JavaScript 来轻松制作一个基本的日历。其中，HTML 负责构建页面结构，CSS 实现样式美化，JavaScript 则用来处理各种交互和逻辑。
实现方法
1. HTML 结构
我们先来设立一个基本的 HTML 结构，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单日历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
<div class="month-header">
<span class="prev-month">‹</span>
<h2 class="month"></h2>
<span class="next-month">›</span>
</div>
<ul class="weekdays">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="days"></ul>
</div>
<script src="main.js"></script>
</body>
</html>
上面的代码中，我们创建了一个名为 calendar 的 div 元素，以及几个月份和日期相关的元素，包括当前月份的标题栏、星期几的栏和日期的栏。
2. CSS 样式
下面，我们为这些元素添加样式。在 style.css 文件中，加入如下代码：
body {
font-family: Helvetica, Arial, sans-serif;
}
.calendar {
width: 350px;
margin: 50px auto;
border: 1px solid #ccc;
}
.month-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
color: #0089ff;
background-color: #f5f5f5;
}
.prev-month,
.next-month {
font-size: 20px;
cursor: pointer;
}
.weekdays {
display: flex;
margin: 0;
padding: 0;
list-style: none;
background-color: #eee;
}
.weekdays li {
flex: 1;
text-align: center;
padding: 10px 0;
}
.days {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.days li {
flex: 1;
text-align: center;
padding: 10px 0;
border: 1px solid #ccc;
}
.days li.is-today {
background-color: #0089ff;
color: #fff;
}
上面的样式代码中，我们为各个元素都添加了合适的样式，让它们看起来像一个日历。
3. JavaScript 逻辑
最后，我们需要使用 JavaScript 添加逻辑，让日历能够动态展示不同月份和日期。在 main.js 文件中，加入如下代码：
// 获取元素
const monthEl = document.querySelector('.month');
const prevMonthEl = document.querySelector('.prev-month');
const nextMonthEl = document.querySelector('.next-month');
const daysEl = document.querySelector('.days');
// 获取当前年份、月份和日期
const currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
// 定义月份和日期的数组
const months = [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
];
const daysOfWeek = [
'周日',
'周一',
'周二',
'周三',
'周四',
'周五',
'周六'
];
// 根据年份和月份计算天数
const daysInMonth = (month, year) => {
return new Date(year, month+1, 0).getDate();
}
// 渲染日期列表
const renderCalendar = (month, year) => {
monthEl.textContent = months[month] + ' ' + year; // 更新标题栏
// 计算当月的第一天是星期几
const firstDayOfMonth = new Date(year, month, 1).getDay();
// 渲染前面的空白天数
let daysHtml = '';
for (let i = 0; i < firstDayOfMonth; i++) {
daysHtml += '<li></li>';
}
// 渲染当月的日期
const numDays = daysInMonth(month, year);
for (let i = 1; i <= numDays; i++) {
if (i === currentDate.getDate() && year === currentDate.getFullYear() && month === currentDate.getMonth()) {
daysHtml += '<li class="is-today">' + i + '</li>';
} else {
daysHtml += '<li>' + i + '</li>';
}
}
daysEl.innerHTML = daysHtml; // 更新日期列表
}
renderCalendar(currentMonth, currentYear);
// 处理月份切换
prevMonthEl.addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar(currentMonth, currentYear);
});
nextMonthEl.addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentMonth, currentYear);
});
上述 JavaScript 代码中，我们获取了所需的元素，并定义了当前年份和月份变量。接下来，我们实现了两个函数 daysInMonth() 和 renderCalendar()。
-
daysInMonth()：这个函数接收一个月份和年份作为参数，然后计算该月份的天数。这是一个辅助函数，用于后面的renderCalendar()函数中计算每个月的天数。 -
renderCalendar()：这个函数接收一个月份和年份作为参数，并根据这些参数渲染出一个月的日历，包括日期的列表和标题栏。首先，它计算当月的第一天是星期几，并根据这个值在日历中渲染前面的空白天数；然后，它渲染出这个月的所有日期并添加到日期列表中。
最后，我们监听前一个月和后一个月按钮的点击事件，当点击时，更新页面上显示的年份和月份，然后重新渲染日历。
示例
下面给出两个示例，你可以在浏览器中运行这些代码来查看效果：
示例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单日历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
<div class="month-header">
<span class="prev-month">‹</span>
<h2 class="month"></h2>
<span class="next-month">›</span>
</div>
<ul class="weekdays">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="days"></ul>
</div>
<script src="main.js"></script>
<script>
const currentDate = new Date(2022, 4, 1);
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
renderCalendar(currentMonth, currentYear);
</script>
</body>
</html>
在这个示例中，我们设置当前日期为 2022 年 5 月 1 日。因此，当页面加载时，会默认显示 2022 年 5 月的日历。
示例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单日历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
<div class="month-header">
<span class="prev-month">‹</span>
<h2 class="month"></h2>
<span class="next-month">›</span>
</div>
<ul class="weekdays">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="days"></ul>
</div>
<script src="main.js"></script>
<script>
const currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
renderCalendar(currentMonth, currentYear);
</script>
</body>
</html>
在这个示例中，我们将当前日期设置为系统当前日期。因此，当页面加载时，会默认显示系统当前年份和月份的日历。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js css+html实现简单的日历 - Python技术站
微信扫一扫 
支付宝扫一扫 