【实验小案例】原生JavaScript实现日历表

༄迷恋࿐

已于 2022-12-13 00:10:53 修改

阅读量1.6k

点赞数 2

分类专栏：实验小案例文章标签： javascript 前端 html

于 2022-09-27 15:22:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45528435/article/details/127071626

版权

这篇博客详细介绍了如何使用原生JavaScript实现一个功能完善的日历表，包括处理不同月份数行数的逻辑，并提供了修改记录和实际效果展示。作者强调代码可作为参考，可以根据需求调整CSS和增加其他功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JavaScript打印日历表

作者：迷恋

修改记录

2022年12月12日 BUG 已修改 原代码的95行中，rows最多行数为5行，这是不对的，当一个大月的第一天是星期六，或者小月的第一天是星期天时，就会是六行的结果（参考2023年4月）。另外，因为5行与6行不固定，所以删掉（注释）了原9行、14行与27行的固定高度。这只是一个实现日历表的逻辑参考，css部分以及其他功能与参数上的部分根据自己的需要修改即可。

因为写项目需要到签到的模块，想整个日历一样的签到表，参阅资料后记录如下：

<!DOCTYPE html>
<html>
	<head>
		<title>日历</title>
		
		<style type="text/css">
			#div1{
   
				width:425px;
				//height:420px;
				border:1px solid gray;
			}
			#div2{
   
				width: 390px;
				//height: 390px;
				margin:auto;
				margin-top: 15px;
			}
			#div21{
   
				width: 220px;
				height: 72px;
				margin:auto;
				line-height: 72px; 
				margin:auto;
			}
			#div22{
   
				width: 355px;
				//height: 310px;
				margin:auto;
			}
			#table1{
   
				width: 355px;
				height: 30px;
				border-spacing: 30px 33px;
			}
			#table2{
   
				width: 355px;
				height: 30px;
				line-height: 30px;
				border-spacing: 30px 0px;
			}
		</style>
	</head>
	
	<body>
		<div id="div1">
			<div id=