簡易萬年曆這個案例是比較有意義的，雖然是個小demo，但涵蓋的知識是一點也不少啊！需要靜下心來好好理解，完全理解下來，就會覺得也沒那麼難，理解了這個demo，後續很多東西都知道怎麼寫了。好啦，先上HTMl部分的代碼。 樣式可以自己更改哈！ 下麵是javascript的代碼，會加上註釋，以防小白白看不 ...
簡易萬年曆這個案例是比較有意義的，雖然是個小demo，但涵蓋的知識是一點也不少啊！需要靜下心來好好理解，完全理解下來，就會覺得也沒那麼難，理解了這個demo，後續很多東西都知道怎麼寫了。好啦，先上HTMl部分的代碼。
1 <body> 2 <div id="tab" class="calendar"> 3 <ul id="box"> 4 <li class="active"> 5 <h2>1</h2> 6 <p>JAN</p> 7 </li> 8 <li> 9 <h2>2</h2> 10 <p>FER</p> 11 </li> 12 <li> 13 <h2>3</h2> 14 <p>MAR</p> 15 </li> 16 <li> 17 <h2>4</h2> 18 <p>APR</p> 19 </li> 20 <li> 21 <h2>5</h2> 22 <p>MAY</p> 23 </li> 24 <li> 25 <h2>6</h2> 26 <p>JUN</p> 27 </li> 28 <li> 29 <h2>7</h2> 30 <p>JUL</p> 31 </li> 32 <li> 33 <h2>8</h2> 34 <p>AUG</p> 35 </li> 36 <li> 37 <h2>9</h2> 38 <p>SEP</p> 39 </li> 40 <li> 41 <h2>10</h2> 42 <p>OCT</p> 43 </li> 44 <li> 45 <h2>11</h2> 46 <p>NOV</p> 47 </li> 48 <li> 49 <h2>12</h2> 50 <p>DEC</p> 51 </li> 52 </ul> 53 <div class="text" id="txt"> 54 <h2>1月活動</h2> 55 <p>快過年了，大家可以商量著去哪玩吧～</p> 56 </div> 57 </div> 58 </body>
樣式可以自己更改哈！
1 <style> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 li { 8 list-style: none; 9 } 10 11 body { 12 background: #f6f9fc; 13 font-family: arial; 14 } 15 16 .calendar { 17 width: 210px; 18 margin: 0 auto; 19 padding: 10px 10px 20px 20px; 20 background: #eae9e9; 21 } 22 23 .calendar ul { 24 width: 210px; 25 overflow: hidden; 26 padding-bottom: 10px; 27 } 28 29 .calendar li { 30 float: left; 31 width: 58px; 32 height: 54px; 33 margin: 10px 10px 0 0; 34 border: 1px solid #fff; 35 background: #424242; 36 color: #fff; 37 text-align: center; 38 cursor: pointer; 39 } 40 41 .calendar li h2 { 42 font-size: 20px; 43 padding-top: 5px; 44 } 45 46 .calendar li p { 47 font-size: 14px; 48 } 49 50 .calendar .active { 51 border: 1px solid #424242; 52 background: #fff; 53 color: #e84a7e; 54 } 55 56 .calendar .active p { 57 font-weight: bold; 58 } 59 60 .calendar .text { 61 width: 178px; 62 padding: 0 10px 10px; 63 border: 1px solid #fff; 64 padding-top: 10px; 65 background: #f1f1f1; 66 color: #555; 67 } 68 69 .calendar .text h2 { 70 font-size: 14px; 71 margin-bottom: 10px; 72 } 73 74 .calendar .text p { 75 font-size: 12px; 76 line-height: 18px; 77 } 78 </style>
下麵是javascript的代碼，會加上註釋，以防小白白看不懂哈！
1 <script> 2 // 模擬後端數據 3 var arr = ['快過年了，大家可以商量著去哪玩吧～', 4 '大家好好學習吧222222~~~', 5 '大家好好學習吧222222333~~~', 6 '大家好好學習吧222444222~~~', 7 '大家好好學習555吧222222~~~', 8 '大家好好學習吧666222222~~~', 9 '大家好好學習吧227772222~~~', 10 '大家好好學習吧28888822222~~~', 11 '大家好好學習吧99999222222~~~', 12 '大家好好學習10000000吧222222~~~', 13 '大家好好學習吧111111222222~~~', 14 '大家好好學習吧22222200000000000~~~']; 15 // 獲取所有的li 16 var array = document.querySelectorAll("#tab ul li"); 17 // 獲取h2和p標簽 18 var h2 = document.querySelector("#txt h2"); 19 var p = document.querySelector("#txt p"); 20 // 遍曆數組，所有li綁定點擊事件 21 for (var i = 0; i < array.length; i++) { 22 // 定義一個不可見的健（屬性），將i的存放好，【提前給每個li都編號（預設沒有編號）】 23 array[i].num = i; 24 // 點擊事件 25 array[i].onclick = function () { 26 // 遍曆數組，因為外面的i在這裡是獲取不到的，所以要重新遍歷 27 for (var j = 0; j < array.length; j++) { 28 // 將所有li的類名都更改為空，即不存在樣式 29 array[j].className = ""; 30 } 31 // 被點擊的那個對象的類名更改為active 32 this.className="active"; 33 // 同時更改h2和p標簽裡面的內容 34 h2.innerHTML=this.num+1+"月活動"; 35 p.innerHTML=arr[this.num]; 36 } 37 } 38 </script>
理解下來，還是可以的；第一個難點是給所有li綁定事件的時候，迴圈是立即執行的，所以事件裡面並不能直觀的知道點擊的是哪個，所以只能通過this關鍵字來獲取；第二個難點是事實上用this我們同樣不能知道是那個li，那樣怎麼更改所對應的信息呢，給編號，在事件發生前，迴圈內，給li一個不可見的屬性（自己定義），存儲每個li所對應的的下標。如果還是不能理解，評論留言！
