如何在本机反应中显示日历 - Javascript(1)

📌 相关文章

📜 如何在本机反应中显示日历 - Javascript(1)

📅 最后修改于: 2023-12-03 14:52:56.669000 🧑 作者: Mango

如何在本机反应中显示日历 - Javascript

如果您要在JavaScript中添加一个完全可定制的日历，则可以使用全面的JavaScript日历库。然而，如果您只需要一个简单的日历，那么可以使用少量代码来创建一个基本的日历来达到目的。

HTML

首先，我们需要在HTML中创建一个容器，该容器将包含日历。以下是HTML代码片段：

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

CSS

接下来，我们需要为日历添加样式。以下是一个基本的CSS样式，用于为日历添加背景颜色、边框和排版：

#calendar {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  width: 250px;
}

JavaScript

现在，我们可以开始编写JavaScript代码来创建日历。我们将使用Date()对象来获取当前日期，并使用getMonth()和getFullYear()方法来获取月份和年份。

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

接下来，我们将创建一个函数来生成日历。我们将使用该函数来显示所选月份的日历。以下是JavaScript代码片段：

function generateCalendar(month, year) {
  var calendar = document.getElementById("calendar");

  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  var daysInMonth = new Date(year, month+1, 0).getDate();
  var firstDay = new Date(year, month, 1).getDay();

  var html = "<table>";
  html += "<caption>" + months[month] + " " + year + "</caption>";
  html += "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
  var day = 1;
  for (var i=0; i<6; i++) {
    html += "<tr>";
    for (var j=0; j<7; j++) {
      if (i===0 && j<firstDay) {
        html += "<td></td>";
      } else if (day > daysInMonth) {
        break;
      } else {
        html += "<td>" + day + "</td>";
        day++;
      }
    }
    html += "</tr>";
    if (day > daysInMonth) {
      break;
    }
  }
  html += "</table>";
  calendar.innerHTML = html;
}

该函数将接受所选月份和年份作为参数，并使用Date()对象来计算所选月份中的天数和第一天的星期。

接下来，该函数将生成HTML代码，以显示日历中的所有日期。它将使用for循环来遍历表格的所有行和列，并使用if语句来确定是否需要在单元格中显示日期。

最终代码

<!DOCTYPE html>
<html>
<head>
	<title>Calendar</title>
	<style>
		#calendar {
			background-color: #fff;
			border: 1px solid #ccc;
			padding: 10px;
			width: 250px;
		}
	</style>
</head>
<body>
	<div id="calendar"></div>

	<script>
		var today = new Date();
		var currentMonth = today.getMonth();
		var currentYear = today.getFullYear();

		function generateCalendar(month, year) {
		  var calendar = document.getElementById("calendar");

		  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

		  var daysInMonth = new Date(year, month+1, 0).getDate();
		  var firstDay = new Date(year, month, 1).getDay();

		  var html = "<table>";
		  html += "<caption>" + months[month] + " " + year + "</caption>";
		  html += "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
		  var day = 1;
		  for (var i=0; i<6; i++) {
		    html += "<tr>";
		    for (var j=0; j<7; j++) {
		      if (i===0 && j<firstDay) {
		        html += "<td></td>";
		      } else if (day > daysInMonth) {
		        break;
		      } else {
		        html += "<td>" + day + "</td>";
		        day++;
		      }
		    }
		    html += "</tr>";
		    if (day > daysInMonth) {
		      break;
		    }
		  }
		  html += "</table>";
		  calendar.innerHTML = html;
		}

		generateCalendar(currentMonth, currentYear);
	</script>
</body>
</html>

以上程序会在HTML页面的<div id="calendar"></div>中显示一个基本的日历，包括当前月份的所有日期。您可以使用CSS样式和JavaScript代码来自定义日历，以适应您的需求。