Ferris教程学习笔记:js示例2.13 简易JS年历

//解题思路:
   将每一个月的节日保存在一个数组中，下标0开始--11
   在程序中为每一个li添加一个点击事件
   1:修改css属性
   2:依据元素下标赋值
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>简易JS年历</title>
 5 <style type="text/css">
 6  body,ul,li,h2,p{margin:0;padding:0;}
 7  body{font:12px/1.5 Tahoma;}
 8  #calendar{width:248px;overflow:hidden;zoom:1;background:#eaeaea;margin:10px auto;padding:0 0 10px 10px;}
 9  #calendar ul{overflow:hidden;zoom:1;}
10  #calendar li{color:#fff;float:left;width:40px;height:40px;cursor:pointer;font-size:14px;
11  text-align:center;background:#424242;line-height:1.3;list-style-type:none;border:1px solid #424242;
12  margin:10px 10px 0 0;padding:5px;}
13  #calendar li.current{color:#f69;background:#fff;}
14  #calendar li strong{display:block;font-size:18px;}
15  
16  #msg{color:#666;background:#f1f1f1;border:1px solid #fff;margin:10px 10px 0 0;padding:5px;}
17  #msg h2{font-size:14px;}
18 </style>
19 </head>
20 <body>
21  <div id="calendar">
22   <ul>
23    <li class=""><strong>1</strong>JAN</li>
24    <li class=""><strong>2</strong>FER</li>
25    <li class=""><strong>3</strong>MAR</li>
26    <li class=""><strong>4</strong>APR</li>
27    <li class=""><strong>5</strong>MAY</li>
28    <li class=""><strong>6</strong>JUN</li>
29    <li class=""><strong>7</strong>JUL</li>
30    <li class=""><strong>8</strong>AUG</li>
31    <li class="current"><strong>9</strong>SEP</li>
32    <li class=""><strong>10</strong>OCT</li>
33    <li class=""><strong>11</strong>NOV</li>
34    <li class=""><strong>12</strong>DEC</li>   
35   </ul>
36   <div id="msg">
37    <h2>
38      <strong>9</strong>月节日
39      <p>中秋节：9月10日至12日放假3天。</p>
40    </h2>
41   </div>
42  </div>
43 <script type="text/javascript">
44 
45 
46 
47  window.onload = function(){
48    var oArray = [
49         "元旦：1月1日至3日放假三天。",
50         "春节：2月2日至8日放假7天。",
51         "妇女节：3月8日妇女节，与我无关。",
52         "清明节：4月3日至5日放假3天",
53         "劳动节：4月30日至5月2日放假3天。",
54         "端午节：6月4日至6日放假3天。",
55         "小暑：7月7日小暑。不放假。",
56         "七夕节：8月6日七夕节。不放假。",
57         "中秋节：9月10日至12日放假3天。",
58         "国庆节：10月1日至7日放假7天。",
59         "立冬：11月8日立冬。不放假。",
60         "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"    
61    ];
62  
63    //解题思路:
64    //将每一个月的节日保存在一个数组中，下标0开始--11
65    //在程序中为每一个li添加一个点击事件
66    //1:修改css属性
67    //2:依据元素下标赋值
68     var lis = document.getElementById("calendar").getElementsByTagName("li");
69     var p1  = document.getElementById("msg").getElementsByTagName("p")[0];
70     var strong = document.getElementById("msg").getElementsByTagName("strong")[0]; 
71     var size = lis.length;
72     for(var i=0;i<size;i++){
73      lis[i].index = i;
74      lis[i].onclick = function(){
75      
76         //清除样式
77         for(p in lis)lis[p].className = "";
78         this.className = "current";
79         //赋值,节日
80         p1.innerHTML = oArray[this.index];
81         //赋值,月份
82         strong.innerHTML = this.index+1;
83      }
84     }
85  };
86 </script> 
87 </body>
88 </html>