HTML+css+js[简单日历的实现]_在css中如何实现一个月每天日历的变化-优快云博客

本文链接：https://blog.youkuaiyun.com/leaf_leaf__/article/details/123377106

本文档展示了一个使用HTML、CSS和JavaScript实现的电子日历设计。日历能根据当前月份动态显示日期，具备切换上个月和下个月的功能。在实现过程中遇到了日期上移和日期不显示的问题，通过在HTML中添加空div和修改JavaScript代码成功解决。

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

效果：

遇到的问题与解决方法：

1.“日”上移

方法：在“下个月”button后加上<div> </div>防止上移

<div>&nbsp;</div>

2.打完代码后不显示日期，但按钮切换月份可用

方法：最后一行那里，在父元素才可以用，替换为daterow.appendChild(dayElement);

 
  for (var j=1;j<=allday;j++){
        var dayElement=document.createElement('div');
        dayElement.className='everyday';
        dayElement.innerHTML=j+'';
        
        if(j==day){
            dayElement.style.color='red';
        }
        dayElement.appendChild(dayElement);《《《《《

源代码：

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2.2电子日历的设计与实现</title>
		<link rel="stylesheet" type="text/css" href="css/calendar.css"/>
		<script src="js/calendar.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body onload="showDate()">
		<h3>电子日历的设计与实现</h3>
		<hr >
		<div id="calendar">
			<!-- 状态栏 -->
			<div>
				<!-- 显示“上个月”按钮 -->
				<button onclick="lastMonth()">上个月</button>
				<!-- 显示当前年份月份 -->
				<div id="month"></div>
				<!-- 显示“下个月”按钮 -->
				<button onclick="nextMonth()">下个月</button>
				<div>&nbsp;</div> <!--为了调节防止“日”上移-->
			</div>
			
			<!-- 显示星期几 -->
			<div>
				<div class="everyday">日</div>
				<div class="everyday">一</div>
				<div class="everyday">二</div>
				<div class="everyday">三</div>
				<div class="everyday">四</div>
				<div class="everyday">五</div>
				<div class="everyday">六</div>
			</div>
			
			<!-- 显示当前月份每天的日期 -->
			<div id="day"></div>
		</div>
	</body>
</html>

css部分


div{
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
#calendar{
	width: 400px;
	margin: auto;
}
button{
	width: 25%;
	float: left;
	height: 40px;
}
#month{
	width: 50%;
	float: left;
}
.everyday{
	width: 14%;
	float: left;
}

js部分

var today=new Date();
var year=today.getFullYear();
//获取当前年份
var month=today.getMonth()+1;
//获取当前月份
var day=today.getDate();
//获取当前日期
var allday=0;
//当前月份的总天数

//用于推算当前月份一共多少天
function count(){
	if (month !=2){
		if ((month==4)||(month==6)||(month==9)||(month==11)){
			allday=30;
			//4，6，9，11月份为30天
		}else{
			allday=31;
			//其他月份为31天（不包括2月）
		}
	}else{
		//如果是2月份需要判断当前是否为闰年
		if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
			allday=29;
			//闰年的2月份是29天
		}else{
			allday=28;
			//非闰年的2月份是28天
		}
	}
}

//显示日历标题中的当前年份和月份
function showMonth(){
	var year_month=year+"年"+month+"月";
	document.getElementById("month").innerHTML=year_month;
}

//显示当前月份的日历
function showDate(){
	showMonth();//在年份和月份的显示牌上显示当前的年月
	count();//计算当前月份的总天数
	
	//获取本月第一天的日期对象
	var firstdate=new Date(year,month-1,1);
	
	//推算本月的第一天是星期几
	var xq=firstdate.getDay();
	
	//动态添加HTML元素
	var daterow=document.getElementById("day");
	daterow.innerHTML='';
	
	//如果本月的第一天不是星期日，则前面需要用空白元素补全日期
	if (xq !=0){
		for (var i=0;i<xq;i++){
			var dayElement=document.createElement('div');
			dayElement.className='everyday';
			daterow.appendChild(dayElement);
		}
	}
	
	//使用循环语句将当前月份的所有日期显示出来
	for (var j=1;j<=allday;j++){
		var dayElement=document.createElement('div');
		dayElement.className='everyday';
		dayElement.innerHTML=j+'';
		
		//如果日期为今天，将显示为红色
		if(j==day){
			dayElement.style.color='red';
		}
		// dayElement.appendChild(dayElement);
		daterow.appendChild(dayElement);
	}
}

//显示上个月的日历
function lastMonth(){
	if (month>1){
		month-=1;
	}else{
		month=12;
		year-=1;
	}
	showDate();
}

//显示下个月的日历
function nextMonth(){
	if (month<12){
		month+=1;
	}else{
		month=1;
		year+=1;
	}
	showDate();
}