簡易日曆

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。