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

最新推荐文章于 2021-11-03 16:55:54 发布

胖若西瓜

最新推荐文章于 2021-11-03 16:55:54 发布

阅读量461

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/striverst/article/details/106899553

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：改变两个《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是六月份】。