用jquery写一个简单的万年历

1、用html的实现简单的界面：

周末用红色代表，当前日期用绿色标记。可通过输入框（按照格式）和下拉框进行修改日期

代码

1、HTML

```html
<div id="container">
        <div id="select"  name="reg_testdate">
            <button class="btn" id="btnleft"><</button>
            <select id="selectlist"  name="select_year" >              
            </select>
            <span>年</span>
            <select id="selectlist" name="select_month" >
                
            </select>
            <span>月</span>
            <button class="btn" id="btnright">></button>

        </div>
        <div id="input">
            <span>输入年月进行跳转：(2020/12 or 2011-12)</span>
            <br>
            <input type="text" name="inputdate" id="inputdate" value="2021-04">
            <script src="jquery1.9.1.js"></script>
            <div>请输入正确格式！</div>
        </div>
        
        <div id="week">
            <div>星期日</div>
            <div>星期一</div>
            <div>星期二</div>
            <div>星期三</div>
            <div>星期四</div>
            <div>星期五</div>
            <div>星期六</div>
        </div>
        <div id="date">

        </div>
    </div>

2、CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container{
    width: 800px;
    height: 800px;
    margin: 0 auto;
    /* background-color: red; */
}
#select {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#selectlist{
    height: 30px;
    width: 80px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    margin: 0 5px;
}
.btn{
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    margin: 0 5px;
}
span{
    font-size: 18px;
}
#input{
    height: 70px;
    text-align: center;
    font-size: 14px;
}
#input>div{
    color: red;
}

#week{
    height: 80px;
    width: 588px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

}
#week>div{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgb(70, 62, 62,0.5);
    margin: 0 2px;
    text-align: center;
    font-size: 20px;
    line-height: 80px;
    color: rgba(243, 80, 15, 0.884);
}
#date{
    height: 80px;
    width: 588px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: center; */
}
#date .div1{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 2px;
    text-align: center;
    /* font-size: 20px;
    line-height: 80px; */
    /* color: rgba(243, 80, 15, 0.884); */
}
#date .div2{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* background-color: rgb(70, 62, 62,0.5); */
    border: 1px solid red;
    margin: 0 2px;
    text-align: center;
    font-size: 20px;
    line-height: 80px;
    /* color: rgba(107, 90, 83, 0.884); */
}

#date>div:nth-child(7n){
    color: red;

}
#date>div:nth-child(7n+1){
    color: red;

}

3、JS代码

<script >
    //加载隐藏“请输入正确格式！”
    $("#input>div").hide();
    //用来存放input框中的数据
    var s="";
    MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
    var nowmonth=new Date().getMonth();                      //当前月
    var nowyear  = new Date().getFullYear();                //当前年
    var nowday ;//当前月天数变量
    

    for (var i = (nowyear-50); i < (nowyear+50); i++) //以今年为准，前30年，后30年   
    // document.reg_testdate.select_year.options.add(new Option(i , i)); 
        $("#selectlist[name=select_year]").append("<option value="+i+">"+i+"</option>")

    for (var i = 1; i < 13; i++)   
       $("#selectlist[name=select_month]").append("<option value="+i+">"+i+"</option>")
    // document.reg_testdate.select_month.options.add(new Option( i , i));
    
    //年份和月份的默认值
    $("#selectlist[name=select_year]").select().val(nowyear);
    $("#selectlist[name=select_month]").select().val(nowmonth+1);
    // $("#selectlist[name=select_year] option[value="+nowyear+"]").prop("selected",true);
    // $("#selectlist[name=select_month] option[value="+(nowmonth+1)+"]").prop("selected",true);
    
    // 下拉改变日历事件
    $("#selectlist[name=select_year]").on("change", function(e) {
		nowyear=$(e.currentTarget).val();
        nowday=getday(nowyear,nowmonth);
        $("#date").empty();
        printf(nowyear,nowmonth,nowday);
        s=nowyear+"-"+(nowmonth+1);
        $("#inputdate").val(s);
	});
    $("#selectlist[name=select_month]").on("change", function(e) {
		nowmonth=$(e.currentTarget).val()-1;
        nowday=getday(nowyear,nowmonth);
        $("#date").empty();
        printf(nowyear,nowmonth,nowday);
        s=nowyear+"-"+(nowmonth+1);
        $("#inputdate").val(s);
	});
    
    //箭头点击改变
    $(document).on("click","#btnright",function(){
       
        if(nowmonth==11){
            nowyear++;
            nowmonth=0;
            $('#selectlist[name=select_month]').val(nowmonth+1)
            $('#selectlist[name=select_year]').val(nowyear)
            nowday=getday(nowyear,nowmonth);
            $("#date").empty();
            printf(nowyear,nowmonth,nowday);
        }else{
            nowmonth++;
            $('#selectlist[name=select_month]').val(nowmonth+1)
            nowday=getday(nowyear,nowmonth);
            $("#date").empty();
            printf(nowyear,nowmonth,nowday);
        }
        
        s=nowyear+"-"+(nowmonth+1);
        $("#inputdate").val(s);
        
    });
    $(document).on("click","#btnleft",function(){
        if(nowmonth==0){
            nowyear--;
            nowmonth=11;
            $('#selectlist[name=select_month]').val(nowmonth+1)
            $('#selectlist[name=select_year]').val(nowyear)
            nowday=getday(nowyear,nowmonth);
            $("#date").empty();
            printf(nowyear,nowmonth,nowday);
        }else{
            nowmonth--;
            $('#selectlist[name=select_month]').val(nowmonth+1)
            nowday=getday(nowyear,nowmonth);
            $("#date").empty();
            printf(nowyear,nowmonth,nowday);
        }
        s=nowyear+"-"+(nowmonth+1);
        $("#inputdate").val(s);
        
    });
      

    //input输入框实现  2020/12 or 2011-12
    var regDate = /^[1-2]\d{3}(-|\/)([1-9]|((0[1-9])|(1[0-2])))$/; 
    // console.log(regDate.test($("#inputdate").val()));
    $(document).on("keyup",function(){

        if(regDate.test($("#inputdate").val())) {
            $("#input>div").hide();
            var text=$("#inputdate").val();              
            nowyear=text.substring(0,4);
            console.log(nowyear);
            nowmonth=text.substring(5,7)-1;
            console.log(nowmonth);
            $('#selectlist[name=select_month]').val(nowmonth)
            $('#selectlist[name=select_year]').val(nowyear)
            nowday=getday(nowyear,nowmonth-1);
            $("#date").empty();
            printf(nowyear,nowmonth,nowday);
        }else{
            $("#input>div").show();
        }

    })

    
    // 用方法获取当前月天数
    nowday=getday(nowyear,nowmonth);
    //调用打印方法
    printf(nowyear,nowmonth,nowday);
    //在当前天改变颜色
    // var nowdate=new Date().getDate();
    // console.log(nowdate)
    // $("#date .div2:nth("+(nowdate-1)+")").css("color","green");
     //获取所选月的天数方法
    function getday(year,month){
        //让闰年的二月份天数加一
        //月数对应的天数
        var day = MonHead[month];    
        if (month ==1 && isLeap(year)==1) day++; 
        return day;
       
    }
    //打印日历方法
    function printf(year,month,day){
          
        //获得当月一号日期
        var day1=new Date(year,month,1);
        //获取一号星期几
        var day1_week=day1.getDay();
        var str = "";
        
        // console.log(day1_week)
        for (let i = 0; i < day1_week; i++) {
            str+=`<div class="div1"></div>`
        }
        for (let j = 1; j <=day; j++) {
            str+=`<div class="div2">${j}</div>`
        }
        $("#date").append(str);
        var nowtime=new Date();
        console.log(year==nowtime.getFullYear()&& month== nowtime.getMonth());
        if(year==nowtime.getFullYear() && month== nowtime.getMonth()){
            $("#date .div2:nth("+(nowtime.getDate()-1)+")").css("color","green");
        }
    }
    //判断润年的方法
    function isLeap(year) {
        if((year%4==0 && year%100!=0)||(year%400==0)){
            return 1;
        }
         return 0;
    }

```