簡短的生成當月簽到日曆

問題：新入門H5，公司要做個app中嵌套h5，只是個簡單的簽到頁面，找了幾個大神的插件，感覺用着不錯，但是還是想自己量身定做個簡單的。

解決方法：

1.參考：原大神的日曆簽到：emmmm,找不到了，不過基本是在www.jq22.com上找到。

2.自制：

    效果圖：

    優點：大小隨父元素大小變化，樣式及內容可以隨意修改，代碼簡單容易修改當然功能也就簡單的。

    缺點：功能單一，只是展示當月，以及簽到的日期

    使用：

var thearr =[0,13,1]
getCalendar(thearr);

    html部分：

 

<div style="width: 100%;height: 10rem;">
    <div id="calendarList">
        <div class="thetitle"></div>
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <div class="thecalendar"></div>
    </div>
</div>

           js部分（需要jquery或者zepto）：

/**
 * 自制簽到日曆
 * setCalendar爲基礎值配置
 * getCalendar爲渲染日曆方法，渲染到 #calendar .thecalendar這個元素中，
 * 並且月份渲染到#calendar .thetitle這個元素中；
 *
 * 對於簽到的數據渲染採用：getCalendar([1,5,20])的渲染方式
 * 若無簽到數據，則直接getCalendar([0])
 *
 * */
var setCalendar = {
    time: new Date(),
    year: 2018,
    month: 1,
    day: 1,
    countDay: 0,//當月總天數
    week: 0,//值爲0-6，代表星期1-7
    row: 0,//表格行數
}
function getCalendar(arr) {
    var time = new Date(), htmlinner = "",str = "", num= 0;
    setCalendar.year = time.getFullYear();
    setCalendar.month = time.getMonth()+1;
    setCalendar.day = time.getDate();

    // getDate() 方法可返回月份的某一天。取值範圍是1~31,如果是0的話，就返回最後一天。這樣就能取得當月的天數了
    setCalendar.countDay = new Date(setCalendar.year, setCalendar.month, 0).getDate();

    // getDay() 方法可以返回當月第一天屬於星期幾，返回值0-6，0代表星期天，1代表星期1，查詢6月則輸入5
    setCalendar.week = new Date(setCalendar.year, setCalendar.month-1, 1).getDay();

    // 已知當月總天數以及第一天星期幾，表格需要總行數=（當月總天數+星期幾返回值）/7,向上取捨
    setCalendar.row = Math.ceil((setCalendar.week + setCalendar.countDay)/7);

    for(var i = 0; i<setCalendar.row; i++){
        htmlinner += "<ul>";
        for(var j = 0; j<7; j++){
            if (num>=setCalendar.countDay) {
                break
            } else {
                num = parseInt(7*i+j+1)-setCalendar.week + 1
                if (num <= 0) {
                    num = "";
                    str = "<li>"+ num +"</li>"
                } else {
                    for (var k = 0; k<arr.length; k++) {
                        if (num == arr[k]) {
                            str = "<li class='cal_active'>"+ num +"</li>";
                            break;
                        } else {
                            str = "<li>"+ num +"</li>"
                        }
                    }
                }
                htmlinner += str;
            }
        }
        htmlinner += "</ul>"
    }
    $("#calendarList .thecalendar").html(htmlinner);
    $("#calendarList .thetitle").text(setCalendar.year+"年"+setCalendar.month+"月")
}
var thearr =[0,13,1]
getCalendar(thearr);

        css部分：

#calendarList{
    height: 100%;
    width: 100%;
    font-size: .6rem;
}
#calendarList .thetitle{
    height: 12.5%;
    width: 100%;
    font-size: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#calendarList li{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
#calendarList ul{
    display: flex;
    width: 100%;
    height: 12.5%;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
#calendarList li{
    height: 100%;
    width: 14.29%;
    font-size: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#calendarList .thecalendar{
    height: 75%;
    width: 100%;
}
#calendarList .thecalendar ul{
    display: flex;
    width: 100%;
    height: 16.67%;
    justify-content: initial;
}
#calendarList .thecalendar li{
    height: 100%;
    width: 14.29%;
}
#calendarList .cal_active{
    background: yellow;
}