(004)简易日历 

 1 <html>
 2     <head>
 3         <meta http-equiv="content-Type" content="text/html;charset=utf-8">
 4         <link rel="stylesheet" type="text/css" href="innerHTMLStyle.css">
 5         <script type="text/javascript">
 6 
 7             var monthDatas = [
 8                 "第一个月，大家可以商量着去哪玩吧～",
 9                 "第二个月，做点什么呢",
10                 "第三个月，做点什么呢",
11                 "第四个月，做点什么呢",
12                 "第五个月，做点什么呢",
13                 "第六个月，做点什么呢",
14                 "第七个月，大家可以商量着去哪玩吧～",
15                 "第八个月，做点什么呢",
16                 "第九个月，做点什么呢",
17                 "第十个月，做点什么呢",
18                 "第十一个月，做点什么呢",
19                 "第十二个月，做点什么呢"
20             ];
21             window.onload = function() {
22                 
23                 var liNodes = document.getElementsByTagName("li");
24                 var contentDivNode = document.getElementById("tab").getElementsByTagName("div")[0];
25 
26                 for(var i = 0; i < liNodes.length; i++)
27                 {
28                     liNodes[i].index = i;
29                     liNodes[i].onmouseover = function() {
30                         for(var j = 0; j < liNodes.length; j++)
31                         {
32                             liNodes[j].className = "";
33                         }
34                         this.className = "active";
35                         //contentDivNode.innerHTML = this.index + 1;
36                         contentDivNode.innerHTML = "<h2>" + (this.index + 1) +"月活动</h2><p>" + monthDatas[this.index] + "</p>";
37                     };
38                 }
39 
40             }
41         </script>
42     </head>
43     <body>
44         <div id="tab" class="calendar">
45             <ul>
46                 <li class="active"><h2>1</h2><p>JAN</p></li>
47                 <li><h2>2</h2><p>FER</p></li>
48                 <li><h2>3</h2><p>MAR</p></li>
49                 <li><h2>4</h2><p>APR</p></li>
50                 <li><h2>5</h2><p>MAY</p></li>
51                 <li><h2>6</h2><p>JUN</p></li>
52                 <li><h2>7</h2><p>JUL</p></li>
53                 <li><h2>8</h2><p>AUG</p></li>
54                 <li><h2>9</h2><p>SEP</p></li>
55                 <li><h2>10</h2><p>OCT</p></li>
56                 <li><h2>11</h2><p>NOV</p></li>
57                 <li><h2>12</h2><p>DEC</p></li>
58             </ul>
59         
60             <div class="text">
61                 <h2>1月活动</h2>
62                 <p>快过年了，大家可以商量着去哪玩吧～</p>
63             </div>
64         </div>
65 
66     </body>
67 </html>
 1 @charset "utf-8";
 2 /* CSS Document */
 3 
 4 * { padding: 0; margin: 0; }
 5 li { list-style: none; }
 6 body { background: #f6f9fc; font-family: arial; }
 7 
 8 .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
 9 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
10 .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
11 .calendar li h2 { font-size: 20px; padding-top: 5px; }
12 .calendar li p { font-size: 14px; }
13 
14 .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
15 .calendar .active h2 { }
16 .calendar .active p { font-weight: bold; }
17 
18 .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
19 .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
20 .calendar .text p { font-size: 12px; line-height: 18px; }

 

posted @ 2013-11-25 22:11  雪中飞雁  阅读(77)  评论(0)    收藏  举报