JavaScript制作日历

仅供参考

图片如下

代码如下

css代码

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #data{
            width: 300px;
            border: 1px solid #000;
            margin: 20px auto;
            background: cornsilk;
        }
        #data > p{
            display: flex;
        }
        #data > h5{
            text-align: center;
        }
        #data > p >span{
            padding: 0px 10px;
        }
        #prev,#next{
            cursor: pointer;
        }
        #main{
            flex: 1;
            text-align: center;
        }
        #title{
            overflow: hidden;
            list-style: none;
            background: #ccc;
        }
        #title li{
            float: left;
            width: 40px;
            height: 26px;
            line-height: 26px;
            text-align: center;
        }
        #date{
            overflow: hidden;
            list-style: none;
        }
        #date li{
            float: left;
            width: 35px;
            height: 35px;
            margin: 1px 1px;
            border: 2px solid #000;
            line-height: 35px;
            cursor: pointer;
            text-align: center;
        }
        #date .hover:hover{
            border: 2px solid darkorchid;
        }
        .active{
            color: darkorchid;
        }
    </style>

html代码

<div id="data">
        <p>
            <span id="prev">上一个月</span>
            <span id="main">2021</span>
            <span id="next">下一个月</span>
        </p>
        <h5 id="yue">十一月</h5>
        <ul id="title">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul id="date"></ul>
    </div>

JavaScript代码

<script>
        let date=new Date(); //获取默认时间对象
        add(); //当页面第一次进入渲染一下
        function add(){
            let cDay=date.getDate(); //获取当前的天
            let cMonth=date.getMonth(); //获取当前的月份0-11
            let cYear=date.getFullYear(); //获取当前的年
            //每一个月的第一天,是周几
            let zhou=new Date(cYear,cMonth,1).getDay();
            //获取每个月的天数
            let days=new Date(cYear,cMonth+1,-1).getDate()+1; //每个月的天数
            let arr=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
            document.getElementById('main').innerHTML=cYear;
            document.getElementById('yue').innerHTML=arr[cMonth];
            let html='';
            for(var i=0;i<zhou;i++){
                html+='<li><li>';
            }
            for(var i=1;i<=days;i++){
                if(i==cDay){
                    html+="<li class='active'>"+i+'</li>';
                }else{
                    html+='<li class="hover">'+i+'</li>';
                }
            }
            document.getElementById('date').innerHTML=html;
        }
        document.getElementById('prev').onclick=function(){
            date.setMonth(date.getMonth()-1);
            add();
        }
        document.getElementById('next').onclick=function(){
            date.setMonth(date.getMonth()+1);
            add();
        }
    </script>