成品的效果图

1.HTML文件

---

    
            
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
        
             
     
            
      
                
                       
       2017年12月                
                   
      
            
      
                
       
                    
        
                        
         
          27
         
应出勤
        
                    
        
                        
         
          26
         
实际出勤
        
                    
        
                        
         
          2
         
迟到
        
                    
        
                        
         
          1
         
早退
        
                
       
            
      
        
     
        
     
            
                  
      
                周一                周二                周三                周四                周五                周六                周七            
        
     
        
     
            
      
                                                                                1                2                3            
            
      
                4                5                6                7                8                9                10            
            
      
                11                12                13                14                15                16                17            
            
      
                18                19                20                21                22                23                24            
            
      
                25                26                27                28                29                30                31            
            
      
                                                                                                                            
        
     
        
     
            
      今日
      休息日
      迟到/早退        
     
    
    
        

2.CSS文件

ul {    list-style: none;    padding: 0;    margin: 0;    background: #fff;}.calendT {}.calendT li {    color: #999999;    font-size: .13rem;    text-align: center;    display: -webkit-box;    display: -ms-flexbox;    display: flex;    line-height: .4rem;    border-bottom: 1px solid #eee;    -webkit-box-pack: center;        -ms-flex-pack: center;            justify-content: center;}.calendT li span{-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}.calendC {}.calendC li {    text-align: center;    display: -webkit-box;    display: -ms-flexbox;    display: flex;    font-size: .13rem;    color: #666666;    line-height: calc(100vw/7);    height: calc(100vw/7);}.calendC li span{    position: relative;    width: calc(100vw/7);    border-right: 1px solid #eee;    border-bottom: 1px solid #eee;}.calendC li span:nth-child(6),.calendC li span:nth-child(7){    background: #f3efdd;}.calendC span::before{    position: absolute;    top: .02rem;    left: .02rem;    line-height: 1;}.error,.late,.errorLate {    background:#ebb5b5; }.error::before {    content: "退";    font-size: .12rem;    color: #bf1515;}.late::before {    content: "迟";    font-size: .12rem;    color: #bf1515;}.errorLate::before {    content: "迟/退";    font-size: .12rem;    color: #bf1515;    position: absolute;}.today {    background: #ccd3f3;}

---

3.js文件

function Dragon() {    this.init();}Dragon.prototype = {    nowDate: null,    showDate: new Date(),    init: function(date) {        var date = date || this.showDate;        var year = date.getFullYear() + "-" + ((date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0" + (date.getDate() + 1)) + "-" + ((date.getDate()) > 9 ? (date.getDate()) : "0" + (date.getDate()));        var currentDays = this.getMonthDays(date);        var prevDays = this.getPrevMonthDays();        var nextDays = this.getNextMonthDays();        var firstDay = currentDays.firstDay;        var indexRow = 0;        html = "
";        for (let i = 1; i < firstDay; i++) {            html += "";        }        for (let i = 1; i <= currentDays.days; i++) {            html += "" + i + "";            if ((i + firstDay - 1) % 7 == 0) {                html += "
";                indexRow++;            }        }        if (indexRow == 4) {            var cols = 7 - (firstDay + currentDays.days - 1) % 7;            for (let i = 1; i <= cols; i++) {                html += "";            }            html += "
";        }        if (indexRow == 5) {            var cols = 7 - (firstDay + currentDays.days - 1) % 7;            for (let i = 1; i <= cols; i++) {                html += "";            }            html += "";        }        document.querySelector(".calendC").innerHTML = html;        console.log(year);    },    getMonthDays: function(date, str) { //获取传入时间当前的月份有多少天（不传时间就是获取当前月份的天数）        var str = str === undefined ? 0 : str;        var date = date || new Date();        if (str == 0) {            this.showDate = date;        }        date.setDate(1);        var firstDay = date.getDay();        var monthStart = date.getTime();        date.setMonth(date.getMonth() + 1);        var monthEnd = date.getTime();        var obj = {};        var days = Math.ceil((monthEnd - monthStart) / (24 * 60 * 60 * 1000));        date.setMonth(date.getMonth() - 1)        obj = {            days: days,            firstDay: firstDay == 0 ? 7 : firstDay        }        return obj;    },    getCurrentMonthDays: function() { //获取当前月份的天数        var date = new Date();        if (this.nowDate == null) {            this.nowDate = date;        }        date.setDate(1);        var firstDay = date.getDay();        var monthStart = date.getTime();        date.setMonth(date.getMonth() + 1);        var monthEnd = date.getTime();        var obj = {};        var days = Math.ceil((monthEnd - monthStart) / (24 * 60 * 60 * 1000));        date.setMonth(date.getMonth() - 1);        obj = {            days: days,            firstDay: firstDay == 0 ? 7 : firstDay        }        return obj;    },    getNextMonthDays: function() { //获取下一个月的天数        var date = this.showDate;        date.setMonth(date.getMonth() + 1);        this.getMonthDays(date, 1);        date.setMonth(date.getMonth() - 1);    },    getPrevMonthDays: function() { //获取上一个月的天数        var date = this.showDate;        date.setMonth(date.getMonth() - 1);        this.getMonthDays(date, -1);        date.setMonth(date.getMonth() + 1);    },    nextMonth: function() { //显示下一个月的时间        var date = this.showDate;        date.setMonth(date.getMonth() + 1);        this.init(date);    },    prevMonth: function() { //显示上一个月的时间        var date = this.showDate;        date.setMonth(date.getMonth() - 1);        this.init(date);    }}var calend = new Dragon();$(".preMonth").on("click", function() {    calend.prevMonth();})$(".nextMonth").on("click", function() {    calend.nextMonth();})