HTML简单电子日历

最新推荐文章于 2024-04-26 14:38:08 发布

执心幻恋

最新推荐文章于 2024-04-26 14:38:08 发布

阅读量593

点赞数 6

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77335001/article/details/137788903

版权

该篇文章详细介绍了使用HTML、CSS和JavaScript构建一个简单的电子日历，包括月份切换、日期显示以及高亮当前日期等功能的实现过程。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				text-align: center;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			#calendar{
				width: 400px;
				margin: 10px auto;
			}
			button{
				width: 25%;
				float: left;
				height: 40px;
			}
			#month{
				width: 50%;
				float: left;
			}
			.everyday{
				width: 14%;
				float: left;
			}
			.wk{
				width: 400px;
				height: 60px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body onload="showDate()">
		<h3>简单电子日历的实现</h3>
		<hr />
		<div id="calendar">
			<div class="wk">
				<button onclick="lastMonth()">上个月</button>
				<div id="month"></div>
				<button onclick="nextMonth()">下个月</button>
			</div>
			<!--显示星期-->
			<div class="wk">
				<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>
		<script type="text/javascript">
			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;
					}
					else{
						allday=31;
					}
				}
				else{
					if(((year%4)==0&&(year%100)!=0)||(year%400)==0){
						allday=29;
					}
					else{
						allday=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 xiqi=firstdate.getDay();
				var daterow=document.getElementById("day");
				daterow.innerHTML="";
				if(xiqi!=0){
					for(var i=0;i<xiqi;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.style.fontWeight="bolder";
					}
					daterow.appendChild(dayElement);
				}
			}
			function lastMonth(){
				if(month>1)month=month-1;
				else{
					month=12;
					year=year-1;
				}
				showDate();
			}
			function nextMonth(){
				if(month<12)month=month+1;
				else{
					month=1;
					year=year+1;
				}
				showDate();
			}
		</script>
	</body>
</html>

运行结果：