jQuery--联动日历（一）

首先还是感谢下“妙味课堂”录制的这一个日历联动的视频。

来看下效果图

 

一、先来说下功能：

1.点击“确定”显示日历  

2。再次点击隐藏，或从DOM中删除这个日历。如些反复第一，和第二这两步。

3.让日历中显示当前月份日期(多少天，每天是多少号)。

4.让当前月份的日期和星期几对应.

5.让左边两边的日历关联起来。

 

二、再来说下HTML结构。

1.上面蓝色的是一个DIV，显示当前月分，和上月，下月。

2.下面的日期和星期，是用一个table结构存放数据。星期用thead,日期用：tbody存放。

 

三、功能展开分析：

3.1、前两个功能?

　　让我想起使用JQUERY里面的toggle。很方便就可以解决。

 

3.2、让日历中显示当前月份日期数?

　　既然跟日期有关的，肯定会想起Deta这个对象了。在这个对象中，我们可以获取或设某年，某天，某月，某日，某星期几。但就是不能直接获取这一个月中有多少天。？怎么办呢？

　　所以我们只能用判断了。根据当前月份的数值。来把天数存到一个变量当中。（对象获取到的当前月份要+1。国它是从零开始计算的）.

　　比如现在是五月，根据判断，五月是大，所以变量中就存31这个数值；即这个月有31天。

 

3.3、让当前月份的日期和星期几对应.？？

　　这个问题，解决办法就是，获取到当月一号，对应的星期几。后面的就可以依次排列下去了。这里的依次排列，我理解的是，因为存放日期的都是TD标签，在TBODY里面这些TD的索引，都是排列好的，所以把一号插入到那个TD当中，后面的二号，就会插入到后一个TD当中了。

 

3.4、让左边两边的日历关联起来。

　　这里重点是“关联”:我最近写了“倒计时”,再就是这次的"联动日历"，还有让我想起了“联动下拉菜单”,比如省份和市的联动下拉菜单;这些都涉汲到“联动”.

　　我总结了一下，就是需要“联动”的东西，必定有一个“点”(先这么叫吧)，其它需要变化，都要和这个点相关联起来，这样改变这个点，其它和这个点关联的东西，也就都会发生改变，也就实现了“联动”这一效果。

　　比如，上次的“倒计时”，里面的“点”,就是当前时间和设定以后时间，之前相差的"总毫秒数"。倒计时显示的，时，分，秒，都和这个"总毫秒数"有关联，只要这个“总毫秒数”变化，那么时，分，秒，都会变化，这就是"联动"了.

　　这次的日历联动,里面的"点",就是当前创建日期对象后，获得的年，月。根据这个年，月，来去设置右边，即下个月该显示的东西。那么只要当前获取的年，月，有变化，后面的自然也会变化。也就“联动”了。

　　当然里面还是有点小多细节，处理。

 

四、上代码，太长了，所以只放了结构，里面的内容可以下载文章最后的DEMO

$(function(){
    var nowDate = $(".nowDate"),        //左边的日历盒子
        nextDate = $(".nextDate"),        //右边的日历盒子
        lstrTd = "",                    //左日期的行的DOM结构
        rstrTd = "",                    //右日期的行的DOM结构
        lrows = 0,                        //左日期行数
        rrows = 0,                        //右日期行数
         iHtmlNow = "",                    //左边的日历结构
         iHtmlNext = "",                    //右边的日历的结构
         nowTitleDateY = "",                //左边标题年份
          nowTitleDateM = "",                //左边显示的月份
        nowlastM = "",                    //左边的翻月显示
         nextTitleDateY = "",            //右边标题年份
         nextTitleDateM = "",            //右边显示的月份
        nextLastM = "",                    //右边的翻月显示
         creatbtu = true,                //只创建一次HTML结构的开关
        NumDay = 0,                    //左边每个月的天数;
        rNumDay = 0,                    //左边每个月的天数;
        lfday = 0,                        //左边当前月份的第一天，是星期几
        rfday = 0;                        //右边当前月份的第一天,是星期几
                    
    //创建日期行
    function creatTr(l,r){

    }
    
    /*创建当前和下一个月的日期和年份
    *这里分三种情况，当前月为12月 当前月为11月，当前月为1月
    */
    function getTitleDate(){
        var odate = new Date();
        //如果当前月是12月分，那么右边的月份，就应该是1月份
        
        //如果当前月是11月分，那么右边的月份，就应该是1月份
        
        //如果当前月是1月分，那么左边的月份，就应该是12月份
    }
    
    /*获取当前月份的一号，是星期几
    *首先设置你创建日期对象的年份，月份，和你需要知道的日期数，把这些设置好之后，再使用getDay()方法，就可以获取你设置日期的，星期数了；
    */
    function getfirstD(m1,y1,m2,y2){

    }
    
    //根据大小月份取得天数
    function getTdDay(m1,y1,m2,y2){

    }
    
    //根据传入的年份参数，判断是否是润年，即能够被4整除，但不能被100整除，同时满足时；或者能被400整除；
    function isRunYear(y){

    }
        
    //创建HMTL结构
    function creatHtml(creatbtu){
            //根据当前月份的一号是星期几，来生成有几行存放所有日期
    }
        
    //将日期插入到对应的TD当中
    function insertdate(d,t){
            //插入到左边

            //插入到边

    }
    
    //插入到DOM
    function insertHtml(){

    }
    
    //从DOM中删除
    function delHtml(){
    }
    
    
    //点击确定显示或隐藏日历
    $("input[type=button]").toggle(function(){        
            //加这个判断是防止连续点击确定按钮
            if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
                    //获得标题上面的年份和月份
                    getTitleDate();
                
                    //获得左和右的月份的天数
                    getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
                    
                    //获得左和右的月份一号是星期几
                    getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);

                    //创建HTML结构
                    creatHtml();    
                
                    //将结构插入到DOM当中
                    insertHtml();
                                        
                    //插入日期到左和右的表格TD当中
                    insertdate(lfday,rfday);
                    
                    //展开日期
                    nowDate.add(nextDate).slideDown(200);
            }        
        },function(){
            //加这个判断是防止连续点击
            if(!nowDate.add(nextDate).is(":animated")){
                //收起日历
                nowDate.add(nextDate).slideUp(200);
                //从DOM中删除日历结构
                delHtml();
            }        
        });
})

4.1分析下这代码结构看注解就可以明白的，以下几个步骤：

　　1.获得当前年份，月份（联动的“点”）

　　2.获得左边和右边对应月份的天数；

　　3.获得左边和右边月分当中一号，分别对应的是星期几

　　4.有了以上东西，我们就可以创建HTML结构了(因为要根据月份当中的日期排列，来决定，创建五行，还是六行。来显示日期)

　　5.将创建好的结构，插入到DOM当中

　　6.再将获得的天数，也就是日期数，插入到对应的表格存放日期的TD当中;

 

五、总结

　　1.不用把TR分行处理，只接把tbody里面的td做为一个整体的数组，往里面插入数据；（因为显示的是数字，正好可以和）

 

　　2.“联动”的规则

 

　　3.像这种类似插入很多数据的东西，要用循解决。

 

　　4。像这种数据多的，应该先存放到数组中（因为本例显示的是数字，所以可以直接用循环里面的变量，如果是值，要先存放到数组中，根据索引取出来）;

 

DEMO下载

转载于:https://www.cnblogs.com/lufy/archive/2012/05/31/2528419.html