<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="lib/jquery-1.4.4.js"></script>
<style type="text/css">
.global_div{
min-width:80px;
text-align:center;
}
.global_div_bottom{
height:50px; line-height:50px; font-size:12px;
}
.global_div_top{
text-align:right; line-height:16px; height:16px; font-size:12px;
}
.monday_div{
border:1px solid #dddddd;
}
.monday_div_top{
background-color:#ecf1ff;
color:#666666;
}
.monday_div_bottom{
background-color:#ffffff;
}
.tuesday_div{
border:1px solid #dddddd;
}
.tuesday_div_top{
background-color:#d9d9d9;
color:#999999;
}
.tuesday_div_bottom{
background-color:#f4f5f6;
}
.wednesday_div{
border:1px solid #dddddd;
}
.wednesday_div_top{
background-color:#a9b6e1;
color:#475b9f;
}
.wednesday_div_bottom{
background-color:#e9eeff;
}
.thursday_div{
border:1px solid #a6c7a5;
}
.thursday_div_top{
background-color:#a9b6e1;
color:#aff2ac;
}
.thursday_div_bottom{
background-color:#efffee;
}
.friday_div{
border:1px solid #ea7575;
}
.friday_div_top{
background-color:#ffb9b9;
color:#7c0000;
}
.friday_div_bottom{
background-color:#fff4ed;
}
.saturday_div{
border:1px solid #e5c83f;
}
.saturday_div_top{
background-color:#fad163;
color:#7d5b00;
}
.saturday_div_bottom{
background-color:#ffffe9;
}
.sunday_div{
border:1px solid #2e95c2;
}
.sunday_div_top{
background-color:#6198c3;
color:#ffffff;
}
.sunday_div_bottom{
background-color:#82c3df;
}
.uncomplete_font{
color:#990000;
}
.complete_font{
color:#999999;
}
.holiday_font{
color:#999999;
}
.today_complete_font{
color:#078c00;
font-weight:bolder;
}
.today_uncomplete_font{
color:#990000;
font-weight:bolder;
}
.unread_judge_font{
color:#ff0000;
}
.hover_div{
border:1px solid #d886d5;
}
.hover_div_top{
background-color:#ff8efb;
color:#71006d;
}
.hover_div_bottom{
background-color:#ffe9f9;
color:#c443bf;
}
.half_line_height{
line-height:25px;
}
</style>
<script type="text/javascript">
$(function(){
$("td>div",$("#dateNote")).hover(function(){
$(this).css("cursor","hand");
var parentDiv = $(this);
parentDiv.addClass("hover_div");
$("div",parentDiv).eq(0).addClass("hover_div_top");
$("div",parentDiv).eq(1).addClass("hover_div_bottom");
var obj = $("div",parentDiv).eq(1);
$("div",obj).addClass("hover_div_bottom");
},function(){
var parentDiv = $(this);
parentDiv.removeClass("hover_div");
$("div",parentDiv).eq(0).removeClass("hover_div_top");
$("div",parentDiv).eq(1).removeClass("hover_div_bottom");
var obj = $("div",parentDiv).eq(1);
$("div",obj).removeClass("hover_div_bottom");
})
})
</script>
</head>
<body>
<div>
<table id="dateNote" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="14.2%"><div class="monday_div global_div"><div class="monday_div_top global_div_top">5月1日</div><div class="monday_div_bottom global_div_bottom "><div class="half_line_height uncomplete_font">工作报告</div><div class="half_line_height uncomplete_font">未完成</div></div></div></td>
<td width="14.2%"><div class="tuesday_div global_div"><div class="tuesday_div_top global_div_top">5月2日</div><div class="tuesday_div_bottom global_div_bottom complete_font">已完成</div></div></td>
<td width="14.2%"><div class="wednesday_div global_div"><div class="wednesday_div_top global_div_top">5月3日</div><div class="wednesday_div_bottom global_div_bottom holiday_font">节假日</div></div></td>
<td width="14.2%"><div class="thursday_div global_div"><div class="thursday_div_top global_div_top">5月4日</div><div class="thursday_div_bottom global_div_bottom complete_font">已完成</div></div></td>
<td width="14.2%"><div class="friday_div global_div"><div class="friday_div_top global_div_top">5月5日</div><div class="friday_div_bottom global_div_bottom"><div class="half_line_height unread_judge_font">一条未读评审</div><div class="half_line_height complete_font">共一条评审</div></div></div></td>
<td width="14.2%"><div class="saturday_div global_div"><div class="saturday_div_top global_div_top">5月6日</div><div class="saturday_div_bottom global_div_bottom"><div class="complete_font">共一条评审</div></div></div></td>
<td><div class="sunday_div global_div"><div class="sunday_div_top global_div_top">5月7日</div><div class="sunday_div_bottom global_div_bottom"><div class="half_line_height today_uncomplete_font">今日 未完成</div><div class="half_line_height today_complete_font">今日 已完成</div></div></div></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</div>
</body>
</html>
运用jQuery做成，html css js样式的日历
5星 · 超过95%的资源 需积分: 10 71 浏览量
2011-05-21
15:37:43
上传
评论
收藏 50KB RAR 举报 
diary.rar （4个子文件） 
diary 
.project 385B .tmp_index.html.75364~ 5KB
index.html 5KB lib jquery-1.4.4.js 179KB资源评论
dazheyizu2013-01-07内容还是非常不错的
灵动眼镜2015-09-12谢谢分享可以用。
