js日历

html部分

<div class="div">
        <p><span onclick="syn()">上一年</span><span onclick="addn()">下一年</span></p>
        <p><span onclick="syy()">上一月</span><span onclick="add()">下一月</span></p>
        <p id="p"></p>
        <div class="div">
            <ul>
                <Li>日</Li>
                <Li>一</Li>
                <Li>二</Li>
                <Li>三</Li>
                <Li>四</Li>
                <Li>五</Li>
                <Li>六</Li>
            </ul>
        </div>
        <div id="div" class="div">
            
        </div>
        <div >
            <span>选择的日期是：</span>
            <span id="rq"></span>
        </div>
    </div>

css部分

*{
        margin:0;
        padding: 0;
    }
    .div li{
        float: left;
        list-style: none;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .div{
        width: 210px;
        clear: both;
        margin:0 auto;
        margin-top: 30px;
    }
    .currentDate{
        color: #eee;
    }
    .on{
        background: blue;
        color: #fff;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

js部分

function daysInMonth(month, year) {//指定月份的天数
          return new Date(year, month + 1, 0).getDate();
        }
        var div=document.getElementById('div');
        var rq=document.getElementById('rq');
        var today = new Date();//new日期
        var dayStr = '';
        var year = today.getFullYear(),//获取今天的年
            month = today.getMonth(),//获取月
            day = today.getDate();//获取日
        var p=document.getElementById('p');
        fn(year,month,day);
        function fn(year,month,day){
        dayStr = '';
        div.innerHTML='';
         p.innerHTML=year+'-'+(month+1)+'-'+day;
        var firstDay =new Date(year,month,1).getDay();//这个月第一天星期几
         var dayInMonth = daysInMonth(month,year);//这个月的天数
         var sdayInMonth = daysInMonth(month-1,year);//上个月的天数
        var lastDay =new Date(year,month,dayInMonth).getDay();//这个月最后一天星期几
        var slastDay =new Date(year,month-1,sdayInMonth).getDay();//上个月最后一天
        
        var date=1;
         // 补齐前面的日期
        for(var i=sdayInMonth-slastDay;i<=sdayInMonth;i++){
            dayStr+='<li class="current-month" ><span class="currentDate">'+i+'</span></li>';
        }
        //循环出中间的日期
        for(var date=1;date <= dayInMonth;date++){
            if(date==day){//判断是否加背景
                dayStr += '<li class="dayStyle" ><span class="on" onclick="djadd('+date+')">'+date+'</span></li>';
            }else{
                dayStr += '<li class="dayStyle" ><span onclick="djadd('+date+')">'+date+'</span></li>';
            }    
        }
    // 补齐后面的日期
    for(var j = 1; j < (7 - lastDay); j++){
        dayStr += '<li class="currentDate" ><span>'+j+'</span></li>';
    }
   
    div.innerHTML=dayStr;
}
    function syy(){//上一月
        month=month-1;
        if(month<0){
            year=year-1;
            month=11;
        }
        console.log(month,year);
        fn(year,month,day)
    }
    function syn(){//下一年
        year=year-1;
        console.log(month,year);
        fn(year,month,day)
    }
    function addn(){//上一年
        year=year+1;
        console.log(month,year);
        fn(year,month,day)
    }
    function add(){//下一月
        month=month+1;
        if(month>11){
            year=year+1;
            month=0;
        }
        console.log(month,year);
        fn(year,month,day)
    }      
    function djadd(day){//显示选中的天数
        day=day;
        fn(year,month,day);
        rq.innerHTML=year+'-'+(month+1)+'-'+day;
    }