简单日历的制作

今天分享一个日简单历的制作，主要讲解一下jQuery方面的思路，如何实现一个能切换时间的日历，样式方面相信自己做能做的更好。
先上图：
简单看一下html结构：

<div class="box">
            <div class="top">
                <div class="pre"></div>
                <div class="next"></div>
                <div class="time">
                    <span id="year"></span>年<span id="month"></span>月<span id="date"></span>日
                </div>
            </div>
            <table  cellspacing="10">
                <tr>
                    <th class="relax">日<i>休</i></th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th class="relax">六<i>休</i></th>
                </tr>
            </table>
        </div>

上图，方便理解:

　　基础样式很容易就能完成，随便写写都能达到上图效果。通过观察html的代码发现，我只给table设置一行内容，就是日期（日，一，二…）那一行，下面的日期都是通过jquery实现的，ok，接下来说jquery部分。

    //闰年与非闰年数组
    var arr1 = [31,28,31,30,31,30,31,31,30,31,30,31];
    var arr2 = [31,29,31,30,31,30,31,31,30,31,30,31];


    var date = new Date();//获取时间对象

    var year = date.getFullYear();//求年份
    var month = date.getMonth()+1;//求月份

    //设置表格
    function setTable() {

        var getDate = date.getDate();//获取当前是本月的第几天 用于后面设置当天样式
        var oldTime = new Date(year+'-'+month+'-01');//设置时间 
        var firstDay = oldTime.getDay();//求设置时间第本月第一周是第几天
        var lastMonth = month-1;//上一个月 用来得出日历第一行白色天数
        if(lastMonth == 0){
            lastMonth = 12;
        }
        var lastDay = 0;
        var count = 0;
        var arr3 = [];//此数组存储日历中上一个月份与下一个月份出现的那些天

        //count设值
        if(year % 4 == 0 && year % 100 ==0 ){
            count = arr1[month-1];
            lastDay = arr1[lastMonth-1];
        }else{
            count = arr2[month-1];
            lastDay = arr2[lastMonth-1];
        }

        //设置数组 按顺序存储
        for(var n = 0; n < firstDay; n++){
            arr3.unshift(lastDay);//插入元素至数组头部  
            lastDay--;
        }
        var lastDay = 0;
        for(var m = 0; m < 42 - count - firstDay; m++){
            lastDay++;
            arr3.push(lastDay);//插入元素至数组尾部
        }


        //设置年月日
        $('#year').html(year);
        $('#month').html(month);
        $('#date').html(getDate);


        //清空表格
        $('tr:gt('+(0)+')').remove();

        var text = null;

        //设置表格
        var num = 1;
        for(var i = 0; i < 6; i++){//日历一共六行 循环六次
            $('<tr></tr>').appendTo('table');//插入行
            for(var j = 0; j < 7; j++){
                //插入td
                if(firstDay == j && i == 0){//信号量 如果第一周某一天等于之前求得的本月第一天是周几，便从此次开始插入本月天数
                	//插入本月天数 并设置本月天数有的className 具备样式
                    $('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function ()
                    {
                        $('td').removeClass('active');
                        $(this).addClass('active');
                        text = $(this).html();
                        $('#date').html(text);
                    });
                    //设置当天的样式  如果num等于这天是本月的第多少天 则设置当天样式
                    if(num == getDate){
                        for (var k = 0; k < $('td').length; k++){
                            if($('td').eq(k).html() == getDate){
                                $('td').eq(k).addClass('active');
                            }
                        }
                    }
                    num++;
                }else if( num != 1 && num <= count){//信号量改变 开始插入本月天数
                    $('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function ()
                    {
                        $('td').removeClass('active');
                        $(this).addClass('active');
                        text = $(this).html();
                        $('#date').html(text);
                    });
                    //设置当天的样式
                    if(num == getDate){
                        for (var k = 0; k < $('td').length; k++){
                            if($('td').eq(k).html() == getDate){
                                $('td').eq(k).addClass('active');
                            }
                        }
                    }
                    num++;
                }else{
                	//插入元素并设置上一个月与下一个月的样式
                    $('<td></td>').html(arr3[0]).addClass('last').appendTo('tr:eq('+(i+1)+')');
                    //插入玩删除数组中第一个元素
                    arr3.shift();
                }
            }
        }

    };

    setTable();



    //上一个月
    $('.pre').click(function () {

        month--;
        if(month == 0){
            month = 12;
            year--;
        }
        setTable();
    }).mousedown(function () {
        $(this).css({
            opacity : 1,
        });
    }).mouseup(function () {
        $(this).css({
            opacity: 0.4,
        });
    });

    //下一个月
    $('.next').click(function () {

        month++;
        if(month == 13){
            month = 1;
            year++;
        }
        setTable();
    }).mousedown(function () {
        $(this).css({
            opacity : 1,
        });
    }).mouseup(function () {
        $(this).css({
            opacity: 0.4,
        });
    });

关键思想就是求出当前月份第一天在那个（一定是第一个）星期是第几天，知道月份就知道了有多少天，例如当前月份第一天在第一个星期是第2天，那么for循环当外层循环 i=0 && 里层循环 j=1时，开始插入浅蓝色样式的td标签。上一个月与下一个月的点击事件也不过是重复这个过程，并不难懂。
　　代码有点多，看起来可能有点乱，深蓝色的是当天样式，浅蓝色的是本月天的样式，浅白色就是上一个月与下一个月的样式，无非就是背景色，透明度的变化，很容易设置。每次调用中间删除行很关键，不然table中的行就越来越多了。本人小白，有问题可以指出，欢迎评论。