万年历（含农历）

最新推荐文章于 2023-03-27 09:28:43 发布

VIP文章半旧ad

最新推荐文章于 2023-03-27 09:28:43 发布

阅读量1.9k

点赞数

分类专栏： web前端开发文章标签： web前端开发 JavaScript 万年历农历 html

本文链接：https://blog.csdn.net/wyq024613/article/details/51165005

版权

背景：花了几天时间开发了一个含农历的万年历，虽然还存在一些问题但基本功能都已实现。可能代码并不是很简洁，清晰。仅作为参考。

一、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;