JavaScript 年历的制作

最新推荐文章于 2023-05-31 16:45:28 发布

是怂怂呢

最新推荐文章于 2023-05-31 16:45:28 发布

阅读量1.5k

点赞数 3

文章标签： javascript js html5 css

本文链接：https://blog.csdn.net/qq_45569875/article/details/106072674

版权

JavaScript 年历的制作

js制作简单的年历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background:#CCCCCC;
			}
			table{
				width: 300px;
				margin: auto;
			}
			table caption{
				background:white;
			}
			table td{
				text-align: center;
			}
			#preyear{
				float: left;
				cursor: pointer;
			}
			#nextyear{
				float: right;
				cursor: pointer;
			}
			#premonth{
				cursor: pointer;
			}
			#nextmonth{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>
				<span id="preyear">&lt;&lt;</span>
				<span id="premonth">&lt;</span>
				<span id="year">xxx</span>年
				<span id="month">xxx</span>月
				<span id="nextmonth">&gt;</span>
				<span id="nextyear">&gt;&gt;</span>
			</caption>
			<thead>
				<tr>
					<th>日</th>
					<th>一</th>
					<th>二</th>
					<th>三</th>
					<th>四</th>
					<th>五</th>
					<th>六</th>
				</tr>
			</thead>
			<tbody id="data">	
			</tbody>
		</table>
		<script>
			var showdate=new Date();
			function showCalendar(mydate)
			{
				showdate=mydate;
				var year=mydate.getFullYear();
				document.getElementById('year').innerHTML=year;
				var month=mydate.getMonth();
				document.getElementById('month').innerHTML=month+1;
				//得到当前月共有多少天
				var tmpdate = new Date(year,month+1,0);
				var totaldays = tmpdate.getDate();
				//判断第一天是星期几
				tmpdate = new Date(year,month,1);
				var firstday=tmpdate.getDay();
				//输出第一天之前的空格
				var html="";
				html="<tr>";
				for(var i=0;i<firstday;i++)
				{
					html +="<td></td>";
				}
				//输出所有天
				for(var i=0;i<totaldays;i++)
				{
					html +="<td>"+(i+1)+"</td>";
					if((i+firstday)%7 ==6)
						html+="</tr><tr>";
				}
				//输出最后一天后的空格
				var t=7-(firstday + totaldays)%7;
				for(var i=0;i<t;i++)
				{
					html +="<td></td>";
				}
				html+="</tr>";
				document.getElementById("data").innerHTML=html;
			}
			showCalendar(new Date());
			document.getElementById('preyear').onclick=function()
			{
				var year=showdate.getFullYear();
				showdate.setYear(year-1);
				showCalendar(showdate);
			};
			document.getElementById('nextyear').onclick=function()
			{
				var year=showdate.getFullYear();
				showdate.setYear(year+1);
				showCalendar(showdate);
			};
			document.getElementById('premonth').onclick=function()
			{
				var month=showdate.getMonth();
				showdate.setMonth(month-1);
				showCalendar(showdate);
			};
			document.getElementById('nextmonth').onclick=function()
			{
				var month=showdate.getMonth();
				showdate.setMonth(month+1);
				showCalendar(showdate);
			};
		</script>
	</body>
</html>

代码效果

是怂怂呢

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 年历的制作

JavaScript 年历的制作js制作简单的年历<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background:#CCCCCC; } table{ width: 300px; margin: auto; } table capti
复制链接

扫一扫