js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份

简介: js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份

要使用JavaScript生成一个日历表格,并添加按钮来查看上一个月和下一个月,同时显示月份、年份以及每天对应的周数,并且只渲染有日期的行,可以按照以下步骤进行操作:


1.创建HTML结构:在HTML文件中创建一个包含表格、按钮和日期信息的容器元素。例如:

<div id="calendar">
  <div id="header">
    <button id="prevBtn">上个月</button>
    <span id="monthYear"></span>
    <button id="nextBtn">下个月</button>
  </div>
  <table id="calendarTable">
    <!-- 表格内容将通过JavaScript动态生成 -->
  </table>
</div>


2.编写JavaScript代码:在JavaScript文件中编写代码来生成日历表格、处理按钮点击事件以及计算每天对应的周数。首先,我们需要获取容器元素和按钮元素的引用,然后为按钮添加点击事件监听器。

 

// 获取容器元素和按钮元素的引用
const calendarContainer = document.getElementById('calendar');
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
const monthYear = document.getElementById('monthYear');
// 设置按钮的点击事件监听器
prevButton.addEventListener('click', showPrevMonth);
nextButton.addEventListener('click', showNextMonth);
// 定义当前日期变量
let currentDate = new Date();
// 显示当前月份的日历
showCalendar(currentDate);
function getWeekNumber(year, month, day) {
  const date = new Date(year, month, day);
  date.setHours(0, 0, 0);
  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
  const yearStart = new Date(date.getFullYear(), 0, 1);
  const weekNum = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
  return weekNum;
}
// 显示上一个月的日历
function showPrevMonth() {
  currentDate.setMonth(currentDate.getMonth() - 1);
  showCalendar(currentDate);
}
// 显示下一个月的日历
function showNextMonth() {
  currentDate.setMonth(currentDate.getMonth() + 1);
  showCalendar(currentDate);
}
// 生成日历表格
function showCalendar(date) {
  // 获取年份和月份
  const year = date.getFullYear();
  const month = date.getMonth();
  // 更新月份和年份显示
  monthYear.textContent = `${year}年${month + 1}月`;
  // 清空表格内容
  const calendarTable = document.getElementById('calendarTable');
  calendarTable.innerHTML = '';
  // 创建表头
  const headerRow = calendarTable.insertRow();
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  for (let i = 0; i < 7; i++) {
    const cell = headerRow.insertCell();
    cell.textContent = weekdays[i];
  }
  // 获取当月的第一天和最后一天
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  // 计算日期范围
  const start = firstDay.getDay();
  const end = lastDay.getDate();
  // 创建日期单元格
  let dateCount = 1;
  let weekCount = 1;
  let hasRenderedRows = false;
  for (let row = 0; row < 6; row++) {
    const calendarRow = calendarTable.insertRow();
    for (let col = 0; col < 7; col++) {
      const cell = calendarRow.insertCell();
      if ((row === 0 && col < start) || dateCount > end) {
        // 上个月或下个月的日期
        cell.classList.add('non-current-month');
      } else {
        // 当月的日期
        cell.textContent = dateCount++;
        const currentWeek = getWeekNumber(year, month, cell.textContent);
        cell.dataset.week = currentWeek;
        if (!hasRenderedRows) {
          hasRenderedRows = true;
        }
      }
    }
  }
  // 如果没有渲染任何日期行,则删除最后一行空白行
  if (!hasRenderedRows) {
   ```javascript
    calendarTable.deleteRow(6);
  }
}


3.样式美化:根据需要,可以使用CSS来为表格和按钮添加样式。例如:

#calendar {
  text-align: center;
}
#header {
  margin-bottom: 10px;
}
#prevBtn,
#nextBtn {
  padding: 5px 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}
#monthYear {
  font-weight: bold;
  margin: 0 10px;
}
#calendarTable {
  border-collapse: collapse;
  margin: 0 auto;
}
#calendarTable td {
  padding: 5px;
  text-align: center;
}
.non-current-month {
  color: #ccc;
}


相关文章
|
9天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
2月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
31 1
|
2月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
33 1
|
3月前
|
JavaScript 前端开发 算法
JavaScript中的排他算法实现按钮单选
JavaScript中的排他算法实现按钮单选
18 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
30 0
|
12天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
12天前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
12 0
JS+CSS3点击粒子烟花动画js特效
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
|
1月前
|
JavaScript