前言

制作年历是一个常见的JavaScript练手项目。在这个项目中，我们将使用HTML、CSS和JavaScript来创建一个简单的年历，以展示当前的月份和日期。

第一步：创建页面结构

我们需要创建一个基本的HTML结构，包括一个标题、一个月份和日期选择器以及一个表格来显示日历。

		
		
		
			
		
		
			
年历
			

				月份
				
					1月
					2月
					...
					12月
				
				年份
				
				Go!
			
			
					...
				

				

					

						
周日
						
周一
						
周二
						
周三
						
周四
						
周五
						
周六
					
				
				

					

						

						

						

						

						

						

						

					
			
		
		
	

在上面的示例中，我们创建了一个标题和一个表单，用于选择月份和年份。我们还创建了一个表格，用于呈现日历。表格的头部包含每个星期的名称，每个表格行包含每个月份的日期。

第二步：添加样式

为使页面更具可读性和美观度，我们需要添加一些样式。下面是示例代码：

		body {
			font-family: sans-serif;
			font-size: 18px;
			line-height: 1.6;
			margin: 0;
			padding: 0;
		}

		h1 {
			margin: 0;
			padding: 20px;
			text-align: center;
		}

		label {
			display: inline-block;
			margin-right: 10px;
		}

		select,
		input[type="text"] {
			font-family: inherit;
			font-size: 16px;
			line-height: 1.3;
			padding: 5px;
		}

		button {
			font-family: inherit;
			font-size: 16px;
			line-height: 1.3;
			padding: 5px 10px;
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 3px;
			cursor: pointer;
		}

		table {
			background-color: #f9f9f9;
			border-collapse: collapse;
			margin: 20px auto;
			width: 90%;
		}

		th {
			background-color: #4CAF50;
			color: #fff;
			font-weight: normal;
			padding: 10px;
			text-align: center;
			vertical-align: middle;
		}

		td {
			border: 1px solid #ddd;
			padding: 10px;
			text-align: center;
			vertical-align: middle;
		}

		td.today {
			background-color: #4CAF50;
			color: #fff;
			font-weight: bold;
		}

		td:not(.today):hover {
			background-color: #f1f1f1;
			cursor: pointer;
		}
	

在上面的示例中，我们为各个元素添加了样式，使页面更加易读和美观。我们使用了一些常见的样式属性，如字体、颜色、间距和背景色。

第三步：编写JavaScript代码

下面是我们的JavaScript代码，它实现了计算出一个月中有多少天，以及呈现日历表格的功能：

		const goButton=document.getElementById('go');
		const monthSelect=document.getElementById('month');
		const yearInput=document.getElementById('year');
		const calendarTable=document.getElementById('calendar');

		goButton.addEventListener('click', function() {
			const year=parseInt(yearInput.value);
			const month=parseInt(monthSelect.value);

			const weekdays=['日', '一', '二', '三', '四', '五', '六'];
			const monthDaysMap=[31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

			const firstDay=new Date(year, month, 1);
			const firstDayWeekday=firstDay.getDay();
			const monthDays=monthDaysMap[month];

			let rows='';
			let row='';

			for (let i=0; i < firstDayWeekday; i++) {
				row +='';
			}

			for (let i=1; i <=monthDays; i++) {
				let className='';

				if (i===(new Date()).getDate() && month===(new Date()).getMonth() && year===(new Date()).getFullYear()) {
					className='today';
				}

				row +=''+i+'';

				if ((firstDayWeekday + i - 1) % 7===6) {
					row +='';
					rows +=row;
					row='';
				}
			}

			if (row !=='') {
				for (let i=(firstDayWeekday + monthDays - 1) % 7; i < 6; i++) {
					row +='';
				}

				row +='';
				rows +=row;
			}

			calendarTable.querySelector('tbody').innerHTML=rows;
		});

		function isLeapYear(year) {
			return year % 4===0 && year % 100 !==0 || year % 400===0;
		}
	

上面的代码中，我们首先获取了需要使用的页面元素，包括选择月份和年份的表单元素、日历表格元素和“Go”按钮元素。我们使用addEventListener()方法来监听按钮的点击事件。当按钮被点击时，我们收集前端用户提供的月份和年份，然后计算出该月的第一天是星期几，以及该月有多少天。

然后，我们通过循环来呈现日历表格。我们首先在日历中添加空白单元格，以使第一天显示在正确的位置。然后，我们按顺序添加月份的天数。如果行的长度达到了7，我们就添加新的行。最后，我们检查最后一行是否已经复满7列。如果没有，我们添加一些空白单元格来占位。

总结

在这个示例中，我们学习了如何使用HTML、CSS和JavaScript来创建一个基本的年历。我们使用HTML和CSS来定义页面结构和样式，使用JavaScript来处理数据和呈现日历。

此外，我们还学习了如何在JavaScript中使用条件语句和循环语句来处理和呈现数据。我们也学习了如何使用事件监听器来响应按钮点击事件，并访问DOM元素以对页面进行操作。