• jQuery联动日历(二)


    还是先来看下效果图

    功能说明:

      1.当前日期TD为蓝色,文字为白色

      2.当前日期的,后十天TD为浅蓝色

      3.排除以上两个功能的所有其它日期TD为灰色,文字为灰色

    功能分析:

      1.找到当前日期的TD改变其颜色就OK

      2.这里要注间的就是,因为这一个月和下一个月,之间会有空白的TD,也就是没有日期数的TD,所以不能直接在当前日期,后加十天。而是要先把这些空白的TD,从所有日期TD中过滤出去,然后把有日期的TD,变成一个新的数组,在这个数组中,都是有日期的TD了。再可以对当前日期的后十天,改变颜色了

      3.有了前两个,我们可以获取到改变颜色了TD的开始索引和结束索引,那么再通过这两个索引,就可以把其它的TD改变成灰色了。

    //改变颜色
        function changeColor(){
            var cdate = new Date();
            //获得当前的日期
            var nowd = cdate.getDate();
            //当前日期的索引
            var nowIndex = 0;
            //改变当前日期的颜色;
            nowDate.find("td").each(function(index, element) {
                //如果是当前日期,就是这个TD的索引,存入变量
                if($(this).text() == nowd){
                      $(this).css({"color":"#fff","background-color":"#06C"})
                }
            });
            /*改变后十天的颜色
            *这里要注间的就是,因为这一个月和下一个月,之间会有空白的TD,也就是没有日期数的TD,所以不能直接在当前日期,后加十天。
            *而是要先把这些空白的TD,从所有日期TD中过滤出去,然后把有日期的TD,变成一个新的数组,在这个数组中,都是有日期的TD了。
            *再可以对当前日期的后十天,改变颜色了
            */
            nowDate.find("td").
            add(nextDate.find("td")).
            //第一次过滤,把所有空白,不含有日期的TD都过滤掉
            filter(function(index) {
                return $(this).text() != "";
            }).
            //获得当前日期的TD索引值并存到变量中.这个索引,是过滤了空白TD之后数组中的索引。
            each(function(index, element) {
                  if($(this).css("color")=="rgb(255, 255, 255)"){
                        nowIndex = index;
                }
            }).
            //获得并改变后十天的TD的颜色
            slice(nowIndex+1,nowIndex+11).
            css({"background-color":"#D7DBF9"}).
            end()
            //获得并改变除开,当前和后十天之外的,所有TD的颜色
            .slice(0,nowIndex)
            .css({"background-color":"#f0f0f0","color":"#c3c3c3"}).
            end().
            slice(nowIndex+11).css({"background-color":"#f0f0f0","color":"#c3c3c3"});
        }

    总结:在遇到这种不连续数据处理的时候,可以考虑过滤出不需要的数据,把有用的数据变成一个连续的整体,再对其做处理。生活当中处理事情,也是如是。

    比如我们的硬盘清理的时候,好像也是把不连续的煸区,整理成连续的,可以加快读取速度!

    DEMO下载

  • 相关阅读:
    pyc文件是什么【转载】
    Linux下的python等操作【转载】
    P1012 拼数 字符串
    P1309 瑞士轮 排序选择 时间限制 归并排序
    商业竞争 三分+背包
    老虎ji 剪枝模拟
    交通灯 并查集
    三色抽卡游戏 博弈论nim
    质数串 乱搞
    自动驾驶系统 bfs
  • 原文地址:https://www.cnblogs.com/lufy/p/2530493.html
Copyright © 2020-2023  润新知