用原生javascript制作日历

                                                    用原生js制作日历

 

      1，先在html内容写好日历的样式框架

 <div class="container">
        <header>
            <div class="left">上个月</div>
            <div class="center"></div>
            <div class="right">下个月</div>
        </header>
        <div class="weakend">
            <ul>
                <li>周日</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
            </ul>
        </div>
       <div class="month">

       </div>
    </div>

month部分用js动态生成

        let left = document.querySelector('.left');
            let center = document.querySelector('.center');
            let right = document.querySelector('.right');
            let ulmonth = document.querySelector('.month');

先获取到需要操作的Dom元素

     // 获取当前时间
            let nowDate = new Date();
            // 得到当前的年份
        let year = nowDate.getFullYear(); 
        // 得到当前的月份
        let mm = nowDate.getMonth()+1;
            // 将当前时间赋值给点击要操作的时间
            let currentDate = nowDate;

定义一个方法判断是否为闰年

 function  isLeepYear(year){
            if(year%4===0&&year%100!==0||year%400===0){
                return true;
            }
            return false;
        }

定义一个方法判断当前月一共有多少天

   // 判断当前查看的这一个月一共有多少天
        function MonthAllDay(year,month){
            switch (month) {
                case 1:case 3: case 5: case 7: case 8: case 10: case 12:
                    return 31;
                    break;
                case 4: case 6: case 9: case 11:
                    return 30;
                    break;
                default:
                    if(isLeepYear(year)){
                        return 29;
                    }
                    return 28;
                    break;
            }
        }

定义一个方法得到当前月份的第一天

   // 得到当前月的第一天
      function getMonthOne(year,month){ 
       let currentDate = new Date(year,month-1,1);
        let day = currentDate.getDay();
        return day;
      }

根据上面对的方法，定义一个showDate（）方法将日历添加到网页上

   // 根据当前传过来的时间绘制日历
      function showDate(currentDate){
          let strli = ''
        let year = currentDate.getFullYear();
        let mm = currentDate.getMonth()+1;
        let allDay = MonthAllDay(year,mm);
        let day = getMonthOne(year,mm);
        let ul = document.createElement('ul');
        for(let i=1;i<=day;i++){
            let li = document.createElement('li');
            ul.append(li);
        }
        for(let i=1;i<=allDay;i++){
            let li = document.createElement('li');
            ul.append(li);
            li.innerText = i;
        }
       ulmonth.innerHTML = ''
        ulmonth.append(ul);
        center.innerText = `${year}年${mm}月`
      }

当点击上一个月时，将月份减一，调用showDate函数，得到上一个月的日历添加到网页中

 left.addEventListener('click',function(){
        let year = currentDate.getFullYear();
        let mm = currentDate.getMonth();
        let dd = currentDate.getDate();
            mm--;
            console.log(mm,dd);
         currentDate = new Date(year,mm,dd);
        showDate(currentDate);
       })

但点击下一个月时，将月份加一，调用showDate函数，得到下一个月的日记重构到网页上

 right.addEventListener('click',function(){
        let year = currentDate.getFullYear();
        let mm = currentDate.getMonth()+1;
        let dd = currentDate.getDate();
         currentDate = new Date(year,mm,dd);
        showDate(currentDate);
       })

这里一点，当月份小于1时，得到是时间会是上一年的十二月份，当月份大于12时，得到的时间会是下一年的一月份，所里这里我们可以不需要在月份的边界值做越界判断了。

最后，一个简单的原生js小日历就做出来啦！