背景:花了几天时间开发了一个含农历的万年历,虽然还存在一些问题但基本功能都已实现。可能代码并不是很简洁,清晰。仅作为参考。
一、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="calen.css" />
</head>
<body>
<div class="calendar">
<div class="cale_head">
<div class="control year_control">
<a href="#" class="icon prev"></a>
<div class="year">
<i class="trigger"></i>
<div class="cale_year cale_field"></div>
</div>
<a href="#" class="icon next"></a>
<ul class="year_list"></ul>
</div>
<div class="control month_control">
<a href="#" class="icon prev"></a>
<div class="month">
<i class="trigger"></i>
<div class="cale_month cale_field"></div>
</div>
<a href="#" class="icon next"></a>
<ul class="month_list"></ul>
</div>
<div class="control holiday_control">
<div class="holiday">
<i class="trigger"></i>
<div class="cale_holiday cale_field">2016年假日安排</div>
</div>
<ul class="holiday_list"><li class="hlist">2016年假日安排</li><li>元旦</li><li>春节</li><li>清明节</li><li>劳动节</li><li>端午节</li><li>中秋节</li><li>国庆节</li></ul>
</div>
<div class="control btn_today">返回今天</div>
<div class="time_panel">
北京时间: <span class="time"></span>
</div>
</div>
<div class="cale_main">
<div class="cale_left">
<ul class="weeks">
<li class="days">日</li>
<li class="days">一</li>
<li class="days">二</li>
<li class="days">三</li>
<li class="days">四</li>
<li class="days">五</li>
<li class="days">六</li>
</ul>
<ul class="date">
</ul>
</div>
<div class="cale_right">
<div class="date_bar">
<span class="cur_date"></span>
<span class="cur_weekday"></span>
</div>
<div class="cur_day"></div>
<div class="lunar_bar">
<div class="lunar_date"></div>
<div class="lunar_animal"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="calen.js"></script>
</body>
</html>
二、css
*{
margin:0;
padding:0;
}
body{
font-family:arial;
font-size:12px;
}
ul,li{
list-style:none;
}
.calendar{
width:580px;
margin:0 auto;
border:1px solid #dddddd;
}
.cale_head{
width:100%;
height:42px;
border-bottom:1px solid #dddddd;
line-height:40px;
background:#eeeeee;
box-sizing:border-box;
}
.control{
float:left;
border:1px solid #dddddd;
height:20px;
line-height:20px;
margin:10px 5px;
background-color:#FFFFFF;
zoom:1;
position:relative;
cursor:pointer;
}
.icon{
width:14px;
height:20px;
float:left;
}
.trigger{
float:right;
width:14px;
height:12px;
background:url(image/icon.gif) no-repeat left -55px;
}
.cale_field{
float:left;
margin:0 5px;
}
.year_control .prev{
background:url(image/icon.gif) no-repeat left top;
}
.year_control .year{
float: left;
height: 12px;
line-height: 12px;
padding: 4px 5px;
padding-bottom: 0;
border-left: 1px solid #c9cccf;
border-right: 1px solid #c9cccf;
white-space:nowrap;
}
.year_control .next{
background:url(image/icon.gif) no-repeat left -25px;
}
.year_list{
display:none;
width:74px;
height:160px;
position:absolute;
left:14px;
top:20px;
background:#FFFFFF;
border-bottom:1px solid #dddddd;
border-left:1px solid #dddddd;
border-right:1px solid #dddddd;
overflow:auto;
}
.year_list li{
width:57px;
text-align:center;
color:#999999;
}
.year_list li:hover{
background:#0078B3;
color:#FFFFFF;
}
.month_control .prev{
background:url(image/icon.gif) no-repeat left top;
}
.month_control .month{
float: left;
height: 12px;
line-height: 12px;
padding: 4px 5px;