JS前后五年时间日期万年历

在日常工作和生活中，时间和日期是我们必不可少的一部分。不论是开发者还是普通用户，都需要轻松地查看日历，特别是当需要确定未来五年内的特定日期时。

本篇博文将向大家展示如何使用JavaScript创建一个简单而且好看的前后五年时间日期万年历。

1. 实现思路

我们将使用JavaScript来获取当前日期，并根据所选定的年份循环输出每个月的日期和星期。我们还将使用HTML和CSS来美化日历的显示效果。

2. 完整实现

首先，我们需要一个HTML文件来作为整个页面的容器，并引入所需的样式文件和脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS前后五年时间日期万年历</title>
    <link rel="stylesheet" href="calendar.css">
</head>
<body>
    <h1>JS前后五年时间日期万年历</h1>

    <div id="calendar"></div>

    <script src="calendar.js"></script>
</body>
</html>

然后，我们创建一个CSS文件来美化日历的外观。

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f3f3f3;
}

h1 {
    color: #333;
}

#calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.month {
    width: 300px;
    background-color: #fff;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.month-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.weekdays {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.weekday {
    width: calc(100% / 7);
    font-size: 16px;
    color: #999;
}

.days {
    display: flex;
    flex-wrap: wrap;
}

.day {
    width: calc(100% / 7);
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    padding: 5px;
    text-align: center;
    background-color: #f3f3f3;
}

.today {
    background-color: #ffcc00;
    font-weight: bold;
    color: #fff;
}

最后，我们编写JavaScript来实现日历的功能。

const calendar = document.getElementById('calendar');

const today = new Date();
let currentYear = today.getFullYear();
let currentMonth = today.getMonth();

function buildCalendar(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const numDays = lastDay.getDate();

  const monthContainer = document.createElement('div');
  monthContainer.classList.add('month');

  const monthTitle = document.createElement('div');
  monthTitle.classList.add('month-title');
  monthTitle.textContent = `${year}年 ${month + 1}月`;
  monthContainer.appendChild(monthTitle);

  const weekdaysContainer = document.createElement('div');
  weekdaysContainer.classList.add('weekdays');
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  weekdays.forEach((weekday) => {
    const weekdayEl = document.createElement('div');
    weekdayEl.classList.add('weekday');
    weekdayEl.textContent = weekday;
    weekdaysContainer.appendChild(weekdayEl);
  });
  monthContainer.appendChild(weekdaysContainer);

  const daysContainer = document.createElement('div');
  daysContainer.classList.add('days');
  for (let i = 1; i <= numDays; i++) {
    const dayEl = document.createElement('div');
    dayEl.classList.add('day');
    dayEl.textContent = i;
    if (year === currentYear && month === currentMonth && i === today.getDate()) {
      dayEl.classList.add('today');
    }
    daysContainer.appendChild(dayEl);
  }
  monthContainer.appendChild(daysContainer);

  calendar.appendChild(monthContainer);
}

for (let i = -5; i <= 5; i++) {
  const date = new Date(currentYear + i, currentMonth);
  buildCalendar(date.getFullYear(), date.getMonth());
}

3. 效果预览

完成代码后，您可以在浏览器中打开HTML文件，以获得一个美观的前后五年时间日期万年历。

4. 总结

本文中，我们利用JavaScript、HTML和CSS实现了一个简单而美观的前后五年时间日期万年历。通过查看代码，您可以进一步了解JavaScript和前端开发的基本原理，并通过更改样式文件来定制日历的外观。

希望这个小项目对您有所帮助！加强时间日期处理的能力可以提升开发效率和生活质量。

本文来自极简博客，作者：梦幻之翼，转载请注明原文链接：JS前后五年时间日期万年历

JS前后五年时间日期万年历

1. 实现思路

2. 完整实现

3. 效果预览

4. 总结

全部评论: 0 条

相似文章