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