js签到日历

效果图

日历效果图

html

<html>
<head>
    <title>calendar</title>

    <link rel="stylesheet" type="text/css" href="calendar.mx.1.1.css">
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript" src="calendar.mx.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            Calendar.init("2016/09/21 10:14:11");//
            $("#box").html(Calendar.getCalendar([1,5]));
        });
    </script>
</head>
<body>
    <div id="box" class="calendar"></div>
</body>
</html>


var Calendar = {
    _today : new Date(),
    _date : new Date().getDate(),
    _day : new Date().getDay(),
    _month : new Date().getMonth() + 1,
    _year : new Date().getFullYear(),
    setDate:function(){
        this._date = new Date(this._today).getDate();
    },
    setDay:function(){
        this._day = new Date(this._today).getDay();
    },
    setMonth:function(){
        this._month = new Date(this._today).getMonth() + 1;
    },
    setYear:function(){
        this._year = new Date(this._today).getFullYear();
    },
    init:function(curDate){
        this._today = new Date(curDate);
        this.setDate();
        this.setDay();
        this.setMonth();
        this.setYear();
    },
    isLeap : function() {
        var year = this._year;
        if (year % 4 == 0 && year % 100 > 0) {
            return true;
        }
        if (year % 400 == 0 && year % 3200 > 0) {
            return true;
        }
        return false;
    },
    getLen : function() {
        if (this._month == 2) {
            if (this.isLeap()) {
                return 29;
            }
            return 28;
        }
        if (this._month < 8) {
            if (this._month % 2 > 0) {
                return 31;
            }
            return 30;
        }
        if (this._month % 2 > 0) {
            return 30;
        }
        return 31;
    },
    getCalendar : function(events) {
        var len = this.getLen();
        var d = new Date(this._year, this._month - 1, 1);
        var dfw = d.getDay();
        var arr = new Array();
        var tem = 0;
        var str = "";
        for (var i = 0; i < 6; i++) {
            arr[i] = new Array();
            for (var j = 0; j < 7; j++) {
                tem++;
                if (tem - dfw > 0 && tem - dfw <= len) {
                    arr[i][j] = tem - dfw;
                } else {
                    arr[i][j] = "";
                }
            }
        }
        
        str += '<h4>'+this._year + '年' + this._month + '月'+ this._date + '日</h4>';//标题
        str += '<table class="sign_tab" border="0px" cellpadding="0px" cellspacing="0px">';
        str += '<thread><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thread>';
        str += '<tbody>';
        for (var k = 0; k < 6; k++) {
            if (k == 5 && arr[k][0] == "")
                continue;
            str += '<tr>';
            for (var m = 0; m < arr[k].length; m++) {
                if(events.contains(arr[k][m])){
                    str += '<td class="red_tbg">' + arr[k][m] + '</td>';
                }else{
                    //判断是否是当日
                    if(arr[k][m] == this._date){
                        str += '<td class="cur_day">' + arr[k][m] + '</td>';
                        continue;
                    }
                    if(arr[k][m] == ""){
                        str += '<td class="over">' + arr[k][m] + '</td>';
                        continue;
                    }
                    str += '<td>' + arr[k][m] + '</td>';
                }
            }
            str += '</tr>';
        }
        str += '</tbody>';
        str += '</table>';
        return str;
    },
    nextMonth : function() {
        if (this._month == 12) {
            this._year++;
            this._month = 0;
        }
        this._month++;
    },
    nextYear : function() {
        this._year++;
    },
    previousMonth : function() {
        if (this._month == 1) {
            this._year--;
            this._month = 13;
        }
        this._month--;
    },
    previousYear : function() {
        this._year--;
    }
};

Array.prototype.contains = function(element) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == element) {
            return true;
        }
    }
    return false;
};

css

.calendar{width:680px;margin:10px 0px 20px 0px;color:#555;}
.calendar h4 {border-bottom: 2px solid #5bd999;text-align: center;font-size: 22px;font-weight: 700;margin-top: 10px;margin-bottom:0px;padding: 10px 0;}
.calendar .sign_tab{width: 100%;border-collapse: collapse;border: 1px solid #e5e5e5;border-top: 0;table-layout: fixed;}
.calendar .sign_tab th{text-align: center;height: 60px;font-weight: 700;}
.calendar .sign_tab td{border: 1px solid #e5e5e5;height: 60px;text-align: center;font-size: 20px;font-family: arial;}
.calendar .sign_tab td.over{background-color: #f3f3f3;border-left: 0;border-right: 0;}
.calendar .sign_tab td.red_tbg{background-color: #f61a48;color: #FFF;}
.calendar .sign_tab td.cur_day{background-color: #FFD2D2;color: #FFF;}

js签到日历

推荐阅读更多精彩内容