原生JavaScript实现日历功能代码实例(无引用Jq)

下面是“原生JavaScript实现日历功能代码实例(无引用Jq)”的完整攻略：

1. 前言

日历是常用的组件之一，本文将通过原生 JavaScript 实现一个简单的日历，并且不依赖于 jQuery 等第三方库。主要实现以下功能：

显示当前时间，包括年、月、日。
可以切换月份，并显示当前月份的日期信息。

2. HTML 结构

HTML 结构十分简单，只需一个 div 即可，代码如下：

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

3. JavaScript 代码实现

3.1 显示当前时间

首先，我们要显示当前时间，包括年、月、日。这可以通过 Date 对象来实现。代码如下：

function showTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var dateString = year + '-' + month + '-' + day;
  // 显示时间
  var timeElement = document.createElement('p');
  timeElement.textContent = dateString;
  calendarElement.appendChild(timeElement);
}

3.2 显示当前月份的日期信息

接下来，我们要根据当前日期信息，显示该月份的日期信息。这可以通过 Date 对象和 DOM 操作来实现。代码如下：

function showCalendar() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  // 计算本月第一天是星期几
  var firstDay = new Date(year, month - 1, 1).getDay();
  // 计算本月共有多少天
  var totalDays = new Date(year, month, 0).getDate();
  // 创建表格
  var tableElement = document.createElement('table');
  var trElement = document.createElement('tr');
  tableElement.appendChild(trElement);
  for (var i = 0; i < 7; i++) {
    var thElement = document.createElement('th');
    thElement.textContent = ['日', '一', '二', '三', '四', '五', '六'][i];
    trElement.appendChild(thElement);
  }
  for (var i = 0; i < 6; i++) {
    var trElement = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
      var tdElement = document.createElement('td');
      var day = i * 7 + j - firstDay + 1;
      if (day > 0 && day <= totalDays) {
        tdElement.textContent = day;
      }
      trElement.appendChild(tdElement);
    }
    tableElement.appendChild(trElement);
  }
  // 显示表格
  var tableElement = document.createElement('table');
  var calendarElement = document.getElementById('calendar');
  calendarElement.appendChild(tableElement);
}

3.3 完整代码

最后，我们把 showTime 和 showCalendar 函数整合到一起，并调用它们。完整代码如下：

function showTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var dateString = year + '-' + month + '-' + day;
  // 显示时间
  var timeElement = document.createElement('p');
  timeElement.textContent = dateString;
  calendarElement.appendChild(timeElement);
}

function showCalendar() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  // 计算本月第一天是星期几
  var firstDay = new Date(year, month - 1, 1).getDay();
  // 计算本月共有多少天
  var totalDays = new Date(year, month, 0).getDate();
  // 创建表格
  var tableElement = document.createElement('table');
  var trElement = document.createElement('tr');
  tableElement.appendChild(trElement);
  for (var i = 0; i < 7; i++) {
    var thElement = document.createElement('th');
    thElement.textContent = ['日', '一', '二', '三', '四', '五', '六'][i];
    trElement.appendChild(thElement);
  }
  for (var i = 0; i < 6; i++) {
    var trElement = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
      var tdElement = document.createElement('td');
      var day = i * 7 + j - firstDay + 1;
      if (day > 0 && day <= totalDays) {
        tdElement.textContent = day;
      }
      trElement.appendChild(tdElement);
    }
    tableElement.appendChild(trElement);
  }
  // 显示表格
  var calendarElement = document.getElementById('calendar');
  calendarElement.appendChild(tableElement);
}

// 调用函数
showTime();
showCalendar();

4. 示例说明

4.1 示例一

在上面的代码中，我们显示了当前时间和当前月份的日期信息。但是，我们可以根据需要，修改代码，只显示其中的一个或几个信息。例如，我们只显示当前年份和月份的日期信息，代码如下：

function showCalendar() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  // 计算本月第一天是星期几
  var firstDay = new Date(year, month - 1, 1).getDay();
  // 计算本月共有多少天
  var totalDays = new Date(year, month, 0).getDate();
  // 创建表格
  var tableElement = document.createElement('table');
  var trElement = document.createElement('tr');
  tableElement.appendChild(trElement);
  for (var i = 0; i < 7; i++) {
    var thElement = document.createElement('th');
    thElement.textContent = ['日', '一', '二', '三', '四', '五', '六'][i];
    trElement.appendChild(thElement);
  }
  for (var i = 0; i < 6; i++) {
    var trElement = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
      var tdElement = document.createElement('td');
      var day = i * 7 + j - firstDay + 1;
      if (day > 0 && day <= totalDays) {
        tdElement.textContent = day;
      }
      trElement.appendChild(tdElement);
    }
    tableElement.appendChild(trElement);
  }
  // 显示表格
  var calendarElement = document.getElementById('calendar');
  calendarElement.appendChild(tableElement);
}

4.2 示例二

在上面的代码中，我们创建了表格，并把日期信息放到了表格中。但是，我们也可以根据需要，修改代码来改变表格的样式。例如，我们把表格样式改为黑色背景和白色文字，代码如下：

function showCalendar() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  // 计算本月第一天是星期几
  var firstDay = new Date(year, month - 1, 1).getDay();
  // 计算本月共有多少天
  var totalDays = new Date(year, month, 0).getDate();
  // 创建表格
  var tableElement = document.createElement('table');
  tableElement.style.backgroundColor = 'black';
  tableElement.style.color = 'white';
  var trElement = document.createElement('tr');
  tableElement.appendChild(trElement);
  for (var i = 0; i < 7; i++) {
    var thElement = document.createElement('th');
    thElement.textContent = ['日', '一', '二', '三', '四', '五', '六'][i];
    trElement.appendChild(thElement);
  }
  for (var i = 0; i < 6; i++) {
    var trElement = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
      var tdElement = document.createElement('td');
      var day = i * 7 + j - firstDay + 1;
      if (day > 0 && day <= totalDays) {
        tdElement.textContent = day;
      }
      trElement.appendChild(tdElement);
    }
    tableElement.appendChild(trElement);
  }
  // 显示表格
  var calendarElement = document.getElementById('calendar');
  calendarElement.appendChild(tableElement);
}

以上就是实现一个简单的日历的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JavaScript实现日历功能代码实例(无引用Jq) - Python技术站