js实现简单日历功能

html代码

<div class="box">
    <div id="head">
        <select name="" id="year_box"></select>  year
        <select name="" id="month_box"></select>  month
    </div>
    <ul id="title">
        <li>Sun</li>
        <li>Mon</li>
        <li>Tue</li>
        <li>Wed</li>
        <li>Thur</li>
        <li>Fri</li>
        <li>Sat</li>        
    </ul>
    <ul id="date"></ul>
</div>

css

 .box{
            width: 500px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid black;
            box-sizing: content-box;
            /* padding: 10px; */
        }
        #head{
            width: 500px;
            height: 40px;
            background-color: #ccc;
            text-align: center;
            line-height: 40px;
        }
        #head select{
            margin-left: 20px;
        }
        #title li,
        #date li{
            float: left;
            width: 64px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            list-style: none;
        }
        select{
            width: 80px;
        }
        #date li:hover{
            color: pink;
            cursor: pointer;
        }
  

js代码

   window.onload=function (){
        let year_box=document.getElementById('year_box');
        let month_box=document.getElementById('month_box');
        let date_panel=document.getElementById('date');
        function showHead(year,month){
            year_box.value=year;
            month_box.value=month;
        }
        // 生成装天数的li
        function createBlankLi(obj,text){
            let list =document.createElement('li');
            list.innerHTML=text;
            obj.appendChild(list);
        }
        function createLi(obj,text,cla){
            let list =document.createElement('li');
            list.innerHTML=text;
            list.classList.add(cla);
            obj.appendChild(list);
        }
        // 生成对应的option标签
        function createOption(obj,value,text){
            let option=document.createElement('option');
            option.value=value;// 月份是0序
            option.innerHTML=text;// 月份是1序
            obj.appendChild(option);
        }
        //获取每个月第一天是星期几
        function getWeekDay(month,year){
            let week= new Date(year,month,1);
            return week.getDay();
        }
        //  获取选中月份的天数
        function getTotalDays(y,m){
            let year=parseInt(y);
            let month=parseInt(m);
            let total=0;
            let i=month+1;
            // alert(typeof(month)); 字符串类型
                if(i===2){
                    if(year%100!=0&&year%4==0||year%400==0){
                    total=29;
                    return total;
                    }else{
                        total=28;
                        return total;
                    }
                }else if(i===1||i===3||i===5||i===7||i===8||i===10||i===12){
                    total=31;
                    return total;
                }else{
                    total=30;
                    return total;
                }
            }
            
        // alert(getDatesOfMonth(2021,7));
        //展示每月对应的天数
        function showDate(){
            date_panel.innerHTML='';
            let year=year_box.value;
            let month=month_box.value;// month是0序
            for (let  i=0;i<getWeekDay(month,year);i++) {
                createBlankLi(date_panel,'');
            }
           let totalDays=getTotalDays(year,month);
            for (let j=1;j<=totalDays;j++) {
               createBlankLi(date_panel,j);
            }
        }
        //初始化
        function init(){
            for (let year=2015;year<2023;year++) {
                createOption(year_box,year,year);
            }
            for (let month=1;month<13;month++) {
                createOption(month_box,month-1,month);
            }
            let now=new Date();
        //    alert(now.getDay()); 0~6  七~ 六
            // alert(now.getMonth());  0序
            showHead(now.getFullYear(),now.getMonth());
            showDate();
            year_box.onchange=function(){
                showDate();
            }
            month_box.onchange=function(){
                showDate();
            }
        }
        init();

• 后期待实现的功能 当前日期和其他不一样