还是先来看下效果图
功能说明:
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"}); }
总结:在遇到这种不连续数据处理的时候,可以考虑过滤出不需要的数据,把有用的数据变成一个连续的整体,再对其做处理。生活当中处理事情,也是如是。
比如我们的硬盘清理的时候,好像也是把不连续的煸区,整理成连续的,可以加快读取速度!