效果图:改变两个《select》下拉框的值,得到当年当月的日历
思路 :
<!---改变两个《select》下拉框的值,得到当年当月的日历
具体思路:
1。添加下拉框的值
2。下拉框值的changen函数
3。输出日历的方法:
1.得到这个月的一月一日是星期几,getday()
2.得到这个月有多少天,getDate();
2.输出这个月的每一天-->
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>日历</title>
<style>
*{margin: 0px;padding: 0px;font-family:'Courier New', Courier, monospace;}
#wrap{
width: 700px;
height: auto;
margin: 50px auto;
}
.head{width: 100%;height: 60px;line-height: 60px;background: #666;text-align: center;color: #fff;}
ul{width: 100%;}
#title{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
justify-content: space-between;
}
li{list-style-type: none;text-align: center;width: 100px;}
#dateul li{list-style: none;text-align: center;width: 98px;float: left;height: 60px;line-height: 60px;border: 1px solid red;}
</style>
</head>
<body>
<!---改变两个《select》下拉框的值,得到当年当月的日历
具体思路:
1。添加下拉框的值
2。下拉框值的changen函数
3。输出日历的方法:
1.得到这个月的一月一日是星期几,getday()
2.输出这个月的每一天-->
<div id="wrap">
<div class="head">
<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>
//初始化select内容
var year=document.getElementById("year");
var month=document.getElementById("month");
var dateul=document.getElementById("dateul");
for (var y = 1990;y <3000;y++) {
year.add(new Option(y,y));
}
for (var m = 0; m <12; m++) {
month.add(new Option(m+1,m));//0代表1月
}
//初始化输入今天的日历
onload=function(){
var now=new Date();
year.value=now.getFullYear();
month.value=now.getMonth();
showdate()
}
//onchang事件
year.onchange=function(){
showdate();
}
month.onchange=function(){
showdate();
}
//输入日历
function showdate(){
dateul.innerHTML="";//清空
var da=new Date(year.value,month.value);//获取当前下拉框的日期
for(var i=0;i<da.getDay();i++)//得到这个月的一月一日是星期几
{
createLi("",dateul);
}
var TheMonthDayNumber=mGetDay(year.value,month.value);
for (var i = 1; i <=TheMonthDayNumber; i++) {
createLi(i,dateul);
}
}
//返回年月中月的天数
function mGetDay(yearNumber,monthNumber){
monthNumber++;
var thisDate =new Date(yearNumber,monthNumber,0)//后一个月的0天,表示前一个月的最后一天,即d为month月的天数
return thisDate .getDate();
}
//输出li的函数,//给box盒子添加一个子元素 li
function createLi(text,box){
var li=document.createElement("li");
li.innerHTML=text;
box.appendChild(li);
}
</script>
</body>
</html>
注意事项:
月份的范围是(0-11),
获取一个月的天数:
getDate() 可以取得当前月份的日期,如果要获取2020年六月的日期,可以实例化 new Date(2020,6,0),【月份从0开始这里的6是六月份】,因为6月0日是一个错误的日期格式,js自动纠错,所以实际日期变成了2020年5月的最后一天,所以getDate()获取的就是5月最后一天的日期【月份从0开始这里的5是六月份】。