在页面中添加两个 ＜select＞ 标签，用来显示年份和月份；同时添加两个 ＜ul＞ 标签，一个用来显示星期，另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份

查看本章节

查看作业目录

需求说明：

使用 JavaScript 中的 Date 对象，在页面上显示一个万年历。选择不同的年份和月份，在页面中显示当前月的日历

实现思路：

  1. 在页面中添加两个 <select> 标签，用来显示年份和月份；同时添加两个 <ul> 标签，一个用来显示星期，另一个用来显示日期
  2. 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到 <select> 标签上
  3. 根据 <select> 标签上显示的 value 值，获取当前选中年月的第一天是星期几，并绘制空 <li> 标签
  4. 获取当前选中的年月一共有多少天，并绘制对应的 <li> 标签
  5. 为两个 <select> 标签设置 onchange 事件

实现代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#calender{
				width: 700px;
				background-color: lightgray;
				margin: 20px auto;
			}
			#month_year{
				width: 700px;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			ul li{
				float: left;
				width: 100px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="calender">
			<div id="month_year">
				<select id="year"></select>年
				<select id="month"></select>月
			</div>
			<ul id="title">
				<li>星期天</li>
				<li>星期一</li>
				<li>星期二</li>
				<li>星期三</li>
				<li>星期四</li>
				<li>星期五</li>
				<li>星期六</li>
			</ul>
			<ul id="dateul"></ul>
		</div>
		<script type="text/javascript">
			var yearSelect=document.getElementById("year");
			var monthSelect=document.getElementById("month");
			var dateul=document.getElementById("dateul");
			function init(){
				for (var year=1990;year<3000;year++) {
					createOption(year,year,yearSelect);
				}
				for (var month=1;month<13;month++) {
					createOption(month,month-1,monthSelect);
				}
				var now=new Date();
				console.log(Date)
				showSelect(now.getFullYear(),now.getMonth());
				showDates();
				yearSelect.onchange=function(){
					showDates();
				}
				monthSelect.onchange=function(){
					showDates();
				}
			}
			function createOption(text,value,parent){
				var option=document.createElement("option");
				option.innerHTML=text;
				option.value=value;
				parent.appendChild(option);
			}
			function showSelect(year,month){
				yearSelect.value=year;
				monthSelect.value=month;
			}
			function showDates(){
				dateul.innerHTML="";
				var year=yearSelect.value;
				var month=monthSelect.value;
				for (var i=0;i<getDays(year,month);i++) {
					createLi("",dateul);
				}
				for (var j=1;j<=getDatesOfMonth(year,month);j++) {
					createLi(j,dateul);
				}
			}
			function getDays(year,month){
				var d=new Date(year,month,1);
				return d.getDay();
			}
			function createLi(text,parent){
				var li=document.createElement("li");
				li.innerHTML=text;
				parent.appendChild(li);
			}
			function getDatesOfMonth(year,month){
				var d=new Date(year,month+1,0);
				return d.getDate();
			}
			init();
		</script>
	</body>
</html>

 

posted @ 2020-11-06 10:08  明金同学  阅读(46)  评论(0)  编辑  收藏  举报