js实现，改变两个《select》年月下拉框的值，得到当年当月的日历

本文主要是介绍js实现，改变两个《select》年月下拉框的值，得到当年当月的日历，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：改变两个《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盒子添加一个子元素 lifunction 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是六月份】。

这篇关于js实现，改变两个《select》年月下拉框的值，得到当年当月的日历的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！