查看本章节
查看作业目录
需求说明：
使用 JavaScript 中的 Date 对象，在页面上显示一个万年历。选择不同的年份和月份，在页面中显示当前月的日历
实现思路：
- 在页面中添加两个 <select> 标签，用来显示年份和月份；同时添加两个 <ul> 标签，一个用来显示星期，另一个用来显示日期
- 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到 <select> 标签上
- 根据 <select> 标签上显示的 value 值，获取当前选中年月的第一天是星期几，并绘制空 <li> 标签
- 获取当前选中的年月一共有多少天，并绘制对应的 <li> 标签
- 为两个 <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>