说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简易JS年历</title> <style> body,ul,li,h2,p{ /*清除内外边距*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma;/*行高18px*/ } #calendar{ width:248px; overflow:hidden; zoom:1; background:#eaeaea;/*背景浅白色*/ margin:10px auto;/*左右置中*/ padding:0 0 10px 10px; } #calendar ul{ overflow:hidden; zoom:1; } #calendar li{ color:#fff;/*字体白色*/ float:left;/*左浮动，水平排列*/ width:40px; height:40px; cursor:pointer; font-size:14px;/*字号*/ text-align:center;/*文本居中*/ background:#424242;/*黑色*/ line-height:1.3;/*行高系数，即1.3X12=15.6，取整16*/ list-style-type:none; border:1px solid #424242;/*黑色*/ margin:10px 10px 0 0; padding:5px; } #calendar li.current{ color:#f69;/*粉红色*/ background:#fff;/*白色*/ } #calendar li strong{ display:block;/*显示为块元素*/ font-size:18px; } #msg{ color:#666;/*灰黑色*/ background:#f1f1f1;/*灰白色*/ border:1px solid #fff;/*白色*/ margin:10px 10px 0 0; padding:5px; } #msg h2{ font-size:14px; } </style> <script> window.onload = function () { var oLi = document.getElementById("calendar").getElementsByTagName("li");//链式调用，获取calendar内的所有li,返回一个集合 var oMsg = document.getElementById("msg");//获取msg div元素引用 var oP = oMsg.getElementsByTagName("p")[0];//获取msg信息盒中的p元素中的第一个 var oStrong = oMsg.getElementsByTagName("strong")[0];//获取msg中的strong元素中的第一个，因获得的是一个集合，所以需要用[]取第一个 var oArray = [ //数组字面量 "元旦：1月1日至3日放假三天。", "春节：2月2日至8日放假7天。", "妇女节：3月8日妇女节，与我无关。", "清明节：4月3日至5日放假3天", "劳动节：4月30日至5月2日放假3天。", "端午节：6月4日至6日放假3天。", "小暑：7月7日小暑。不放假。", "七夕节：8月6日七夕节。不放假。", "中秋节：9月10日至12日放假3天。", "国庆节：10月1日至7日放假7天。", "立冬：11月8日立冬。不放假。", "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。" ]; for(var i=0;i<oLi.length;i++){ oLi[i].index = i;//佩服一下，代码的作者对对象的运用很纯熟，直接在对象上添加index忏悔 oLi[i].onmouseover = function () { for (var n = 0; n < oLi.length; n++) oLi[n].className = "";//先重置所有li元素的类为无 this.className = "current";//给当前被点击元素添加类 oP.innerHTML = oArray[this.index];//index的作用出来了 oStrong.innerHTML = this.index + 1;//index值由0开始的，故需加1 } } } </script> </head> <body> <!--外部div包裹一个ul列表和一个子div--> <div id="calendar"> <ul> <li><strong>1</strong>JAN</li> <li><strong>2</strong>FER</li> <li><strong>3</strong>MAR</li> <li><strong>4</strong>APR</li> <li><strong>5</strong>MAY</li> <li class="current"><strong>6</strong>JUN</li> <li><strong>7</strong>JUL</li> <li><strong>8</strong>AUG</li> <li><strong>9</strong>SEP</li> <li><strong>10</strong>OCT</li> <li><strong>11</strong>NOV</li> <li><strong>12</strong>DEC</li> </ul> <div id="msg"> <h2> <strong>6</strong> </h2> <p>端午节：6月4日至6日放假3天。</p> </div> </div> </body> </html>