日历练习
总体效果展示：
代码展示：
源代码部分
<body> <!-- 日历--> <div class="div_sty"> <table cellpadding="10px" cellspacing="10px" height="200px" class="tab_sty"> <tr> <td data="一月活动<br>这是一月活动">1Jan</td> <td data="二月活动<br>这是二月活动">2Fer</td> <td data="三月活动<br>这是三月活动">3Mar</td> </tr> <tr> <td data="四月活动<br>这是四月活动">4Apr</td> <td data="五月活动<br>这是五月活动">5May</td> <td data="六月活动<br>这是六月活动">6Jun</td> </tr> <tr> <td data="七月活动<br>这是七月活动">7Jul</td> <td data="八月活动<br>这是八月活动">8Auq</td> <td data="九月活动<br>这是九月活动">9Sep</td> </tr> <tr> <td data="十月活动<br>这是十月活动">10Oct</td> <td data="十一月活动<br>这是十一月活动">11Nov</td> <td data="十二月活动<br>这是十二月活动">12Dec</td> </tr> </table> <div id="div_sty1"></div> </div>
CSS代码：
*{ padding:0; margin: 0; } .div_sty{ background: #ccc; width: 200px; height: 300px; margin: 0 auto; margin-top: 100px; text-align: center; } .tab_sty td{ color: #FCFCFC; background: #000000; } #div_sty1{ width: 100%; height: 150px; float: left; }
js代码：
var tdDoms = null; var divDoms = null; $(function(){ initDom();//初始化变量 addEvent();//添加事件 tianjiaEvent();//添加事件 }) function initDom(){ tdDoms = $("td");//找到td divDoms = $("#div_sty1");//找到 } function addEvent(){ tdDoms.mouseover(function(){ tdDoms.css("color","white"); $(this).css("color","red"); divDoms.html($(this).attr("data")); }) }
注：当鼠标移动到相应月份的时候，下面的事件提示紧接发生相对应的变化。