简易日历

时间 2019-11-21
标签简易日历繁體版
原文原文链接
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <script type="text/javascript">
  6     var innerText=[
  7     "农历一月也叫正月，吴自牧在《梦梁录·正月》中说，“正月朔日，谓之元旦，俗呼为新年。”",
  8     "“春色满园关不住，一枝红杏出墙来。”宋人叶绍翁的诗句中的红杏，花开二月故称杏月。",
  9     "春夏秋冬四季，三个月为一季，春季中排行老三，所以把三月叫作季月。",
 10     "农历四月为麦子成熟的时候，《礼记·月令》说：“?孟夏之月?麦秋至。”蔡邕在《月令章句》解释为：“百谷各以其初生为春，熟为秋，故麦以孟夏为秋。”四月便称麦月。",
 11     "农历五月最经常使用的别称为仲夏，它排行夏季之中。五月五日为端午节，旧时农家用菖蒲叶与艾叶等扎悬于门首，用以驱邪，因称五月为蒲月。",
 12     "“荷叶罗裙一色裁，芙蓉向脸两边开。”?唐代王昌龄的《采莲曲》?这出污泥而不染的莲蓬，在暑月为人们带来阵阵凉意，故把六月称为荷月。",
 13     "秋季的头一个月谓新秋。古时，瓜果成熟也在秋天，“米谷豆子，秋收冬藏”，把七月叫作瓜月。",
 14     "秋季的八月居中，谓之仲秋。《尔雅·释天》中云：“八月为壮。”郝懿行义疏解释说，“壮者，大也。八月阴大盛，《易》之大壮，言阳大盛也。”故称八月为壮月。",
 15     "“青女素娥俱耐冷，月中霜里斗婵娟。”李商隐把主霜雪的女神青女绰约仙姿描写得美妙绝伦，其摄入魂魄的精髓即是经得起严寒考验的特性。九月的别称除了霜月外，还有季秋、菊月、朽月等。",
 16     "农历十月的别称有：初冬、开冬、露月、良月等。《尔雅·释天》中说：“十月为阳。”郭璞的注解为：“纯阴用事，嫌于无阳，故以名玄。”",
 17     "了解后台编程的相关知识，可以和后台工程师配合完成大型交互应用 - 妙味课堂 - www.miaov.com",
 18     "“墙角数枝梅，凌寒独自开。遥知不是雪，为有暗香来。”宋王安石的咏梅诗，已把寒冬梅花倔强的风骨和报道春之将至的信息描写得恰到妙处。从周代开始，古人把阴历十二月做为腊祭的日子，以狩猎禽兽祭先祖。"
 19     ];
 20     window.onload=function ()
 21     {
 22         var aLi=document.getElementsByTagName('li');
 23         //获取text
 24         var aTxt=document.getElementById('tab').getElementsByTagName('div')[0];
 25         var i=0;
 26         for(i=0;i<aLi.length;i++)
 27         {
 28             aLi[i].index=i;//!!!
 29             aLi[i].onmouseover=function()
 30             {
 31                 var innerT="";
 32                 //当鼠标移入时先将全部LI的样式去除
 33                 for(i=0;i<aLi.length;i++)
 34                 {
 35                     aLi[i].className='';
 36                 }
 37                 //修改此li的className 注意this！
 38                 this.className='active';
 39                 //修改text
 40                 aTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2>"+innerText[this.index];
 41             };
 42         }
 43     };
 44     </script>
 45 <style type="text/css">
 46 *{
 47     padding:0;
 48     margin: 0;
 49 }
 50 li{
 51     list-style: none;
 52 }
 53 /*由于text文本大小不固定，因此无需设置height*/
 54 .all{
 55     width:210px;
 56     margin: 0 auto;
 57     padding:10px 10px 20px 20px;
 58     background-color: #ccc;
 59 
 60 }
 61 .all ul{
 62     width:210px;
 63     padding-bottom: 10px;
 64     overflow: hidden;
 65 }
 66 .all li{
 67     float:left;/*浮动！！*/
 68     width:58px;
 69     border:solid 1px pink;
 70     margin:10px 10px 0 0;
 71     text-align: center;
 72     color:white;
 73     background-color: black;
 74 }
 75 .all .text{
 76     width:178px;
 77     padding:0 10px 10px;
 78     border:solid 1px white;
 79     padding-top: 10px;
 80     background: #f1f1f1; color: #555;
 81 }
 82 .all .text h2{font-size: 14px;margin-bottom: 10px;}
 83 .all .text p{font-size:12px;line-height: 18px;}
 84 .all .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
 85 .all .active h2 { }
 86 .all .active p { font-weight: bold; }
 87 </style>
 88 </head>
 89 <body>
 90 
 91     <div id="tab" class="all">
 92 
 93     <ul>
 94         <li class="active"><h1>1</h1><p>Jan</p></li>
 95         <li><h1>2</h1><p>Feb</p></li>
 96         <li><h1>3</h1><p>Mar</p></li>
 97         <li><h1>4</h1><p>Apr</p></li>
 98         <li><h1>5</h1><p>May</p></li>
 99         <li><h1>6</h1><p>Jun</p></li>
100         <li><h1>7</h1><p>Jul</p></li>
101         <li><h1>8</h1><p>Aug</p></li>
102         <li><h1>9</h1><p>Sep</p></li>
103         <li><h1>10</h1><p>Oct</p></li>
104         <li><h1>11</h1><p>Nov</p></li>
105         <li><h1>12</h1><p>Dec</p></li>
106     </ul>
107 
108     <div class="text">
109     <h2>1月份</h2><p>1111111111111111111</p>
110     </div>
111 
112 </div>
113 
114 </body>
115 </html>