HTML5实现签到功能，项目实战之基于JavaScript实现每日签到打卡送积分功能

一、核心代码：calendar.js

var calUtil = {

    //当前日历显示的年份

    showYear: 2018,

    //当前日历显示的月份

    showMonth: 1,

    //当前日历显示的天数

    showDays: 1,

    eventName: "load",

    //初始化日历

    init: function(signList) {

        calUtil.setMonthAndDay();

        calUtil.draw(signList);

    },

    draw: function(signList) {

        //绑定日历

        var str = calUtil.drawCal(calUtil.showYear, calUtil.showMonth, signList);

        $("#calendar").html(str);

        //绑定日历表头

        var calendarName = calUtil.showYear + "年" + calUtil.showMonth + "月";

        $(".calendar_month_span").html(calendarName);

    },

    //获取当前选择的年月

    setMonthAndDay: function() {

        switch (calUtil.eventName) {

            case "load":

                var current = new Date();

                calUtil.showYear = current.getFullYear();

                calUtil.showMonth = current.getMonth() + 1;
                calUtil.showDays = current.getDate();
                break;

            case "prev":

                var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];

                calUtil.showMonth = parseInt(nowMonth) - 1;

                if (calUtil.showMonth == 0) {

                    calUtil.showMonth = 12;

                    calUtil.showYear -= 1;

                }

                break;

            case "next":

                var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];

                calUtil.showMonth = parseInt(nowMonth) + 1;

                if (calUtil.showMonth == 13) {

                    calUtil.showMonth = 1;

                    calUtil.showYear += 1;

                }

                break;

        }

    },

    getDaysInmonth: function(iMonth, iYear) {

        var dPrevDate = new Date(iYear, iMonth, 0);

        return dPrevDate.getDate();

    },

    bulidCal: function(iYear, iMonth) {

        var aMonth = new Array();

        aMonth[0] = new Array(7);

        aMonth[1] = new Array(7);

        aMonth[2] = new Array(7);

        aMonth[3] = new Array(7);

        aMonth[4] = new Array(7);

        aMonth[5] = new Array(7);

        aMonth[6] = new Array(7);

        var dCalDate = new Date(iYear, iMonth - 1, 1);

        var iDayOfFirst = dCalDate.getDay();

        var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);

        var iVarDate = 1;

        var d, w;

        aMonth[0][0] = "日";

        aMonth[0][1] = "一";

        aMonth[0][2] = "二";

        aMonth[0][3] = "三";

        aMonth[0][4] = "四";

        aMonth[0][5] = "五";

        aMonth[0][6] = "六";

        for (d = iDayOfFirst; d < 7; d++) {

            aMonth[1][d] = iVarDate;

            iVarDate++;

        }

        for (w = 2; w < 7; w++) {

            for (d = 0; d < 7; d++) {

                if (iVarDate <= iDaysInMonth) {

                    aMonth[w][d] = iVarDate;

                    iVarDate++;

                }

            }

        }

        return aMonth;

    },

    ifHasSigned: function(signList, day) {

        var signed = false;

        $.each(signList, function(index, item) {

            if (item.signDay == day) {

                signed = true;

                return false;

            }

        });

        return signed;

    },
    ifDateNow: function (day) {

        if (calUtil.showDays == day) {
            return true;
        }
        return false;

    },

    drawCal: function(iYear, iMonth, signList) {

        var myMonth = calUtil.bulidCal(iYear, iMonth);

        var htmls = new Array();

        htmls.push("");
        htmls.push("<ul>");

        htmls.push("<li>");
        htmls.push("<font>日</font>");
        htmls.push("<font>一</font>");
        htmls.push("<font>二</font>");
        htmls.push("<font>三</font>");
        htmls.push("<font>四</font>");
        htmls.push("<font>五</font>");
        htmls.push("<font>六</font>");
        htmls.push("</li>");
        var d, w;

        for (w = 1; w < 7; w++) {

            htmls.push("<li>");
            for (d = 0; d < 7; d++) {

                var ifHasSigned = calUtil.ifHasSigned(signList, myMonth[w][d]);

                console.log(ifHasSigned);

                if (ifHasSigned) {
                    if (calUtil.ifDateNow(myMonth[w][d])) {
                        htmls.push("<p class='on isborder'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
                    } else { 
                        htmls.push("<p class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
                    }
                } else {
                    if (calUtil.ifDateNow(myMonth[w][d])) {
                        htmls.push("<p class='isborder'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
                    } else {
                        htmls.push("<p>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
                    }
                }

            }

            htmls.push("</li>");
        }

        htmls.push("</ul>");
        htmls.push("");
        htmls.push("");
        return htmls.join('');

    }

};

二、效果图，如下：

三、演示地址：http://www.veichao.net/yanshi/qiandao/