簡易日曆 （innerHTML和行間提取事件的練習）
阿新 • • 發佈：2018-11-27
簡易日曆，滑鼠移入月份實現當前月份style改變，對應文字改變顯示.
總結幾個小點：
1.每個月份對應的文字用陣列來裝，（資料量大，用div的顯示和隱藏不現實）；
2.用迴圈的方式為每個月份新增onmouseover事件；
3.用js的方式給月份新增索引，利於對應月的文字選擇（若用html自定義屬性新增會被FF過濾掉）；
4.innerHTML不僅可以讀寫文字內容，還可以改變HTML內容（包括標籤）。
簡單程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS簡易日曆</title> <style> #calendar{width:300px; height:auto; background:#ccc} .active{background:burlywood;} ul{margin: 0 auto;} ul li{display: inline-block; list-style:none; border:1px solid #CCC; width:50px; height:50px; background:salmon; color:white; text-align: center;} #text{margin-left:15%} </style> <script> window.onload = function(){ var arr=['正月梅花香又香', '二月蘭花盆中裝', '三月桃化紅十里', '四月薔薇靠短牆', '五月石榴紅似火', '六月荷花滿池塘', '七月梔子頭上戴 ', '八月桂花滿樹黃', '九月菊花初開放', '十月芙蓉正上妝', '十一月水仙供上案', '十二月臘梅雪中香']; var calendar = document.getElementById('calendar'); var moon = calendar.getElementsByTagName('li'); var text = calendar.getElementsByTagName('div')[0]; for(var i = 0;i < moon.length; i++) { moon[i].index = i; moon[i].onmouseover = function() { for(var i= 0;i<moon.length;i++) { moon[i].className = ''; } this.className = 'active'; text.innerHTML = '<h4>'+(this.index+1)+'月</h4><p>'+arr[this.index]+'</p>' } } }; </script> </head> <body> <div id="calendar"> <ul id="ul"> <li class="active">Jan</li> <li>Feb</li> <li>Mar</li><br /> <li>Apr</li> <li>May</li> <li>Jun</li><br /> <li>Jul</li> <li>Aug</li> <li>Sep</li><br /> <li>Oct</li> <li>Nov</li> <li>Dec</li><br /> </ul> <div id="text"> </div> </div> </body> </html>