<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>简易日历</title> <style> .wrapper{ width: 250px; height: 400px; background: #efefef; border: 1px solid rgb(240, 240, 240); margin: 0 auto; margin-top: 150px; } .td1{ float: left; width: 50px; height: 50px; border: 1px solid black; text-align: center; margin-left: 20px; color: white; background: rgba(76, 76, 76, 0.9); } .active{ float: left; width: 50px; height: 50px; border: 1px solid black; text-align: center; margin-left: 20px; background: white; color:#ffbdfc; } .div1{ padding-top: 8px; } .row1{ margin: 0 auto; width: 250px; height: 52px; margin-top: 20px; margin-left: 5px; } .txt{ width: 192px; height: 90px; border: 1px solid #f3f3f3; margin: 0 auto; margin-top: 10px; background: rgb(247, 247, 247); } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); var oTxt=document.getElementById('text'); var j=0; var arr=[ '快过年啦,放假啦,一月', '在家里过寒假啊 二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ] var oDiv1=new Array(); //定义一个数组 oDiv1[0]=oDiv[2];oDiv1[1]=oDiv[5]; oDiv1[2]=oDiv[8];oDiv1[3]=oDiv[12]; oDiv1[4]=oDiv[15];oDiv1[5]=oDiv[18]; oDiv1[6]=oDiv[22];oDiv1[7]=oDiv[25]; oDiv1[8]=oDiv[28];oDiv1[9]=oDiv[32]; oDiv1[10]=oDiv[35];oDiv1[11]=oDiv[38]; for(var i=0;i<oDiv1.length;i++){ oDiv1[i].index=i; oDiv1[i].onmouseover=function(){ for(var i=0;i<oDiv1.length;i++){ oDiv1[i].style.color='white'; oDiv1[i].style.background='rgba(76, 76, 76, 0.9)'; } this.style.color='#ffbdfc'; this.style.background='white'; oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; }; } }; </script> </head> <body> <div class="wrapper"> <div class="row1"> <div class="td1"> <div class="div1">1</div> <div>JAN</div> </div> <div class="td1"> <div class="div1">2</div> <div>FER</div> </div> <div class="td1"> <div class="div1">3</div> <div>MAR</div> </div> </div> <div class="row1"> <div class="td1"> <div class="div1">4</div> <div>APR</div> </div> <div class="td1"> <div class="div1">5</div> <div>MAY</div> </div> <div class="td1"> <div class="div1">6</div> <div>JUN</div> </div> </div> <div class="row1"> <div class="td1"> <div class="div1">7</div> <div>JUL</div> </div> <div class="td1"> <div class="div1">8</div> <div>AUG</div> </div> <div class="td1"> <div class="div1">9</div> <div>SEP</div> </div> </div> <div class="row1"> <div class="td1"> <div class="div1">10</div> <div>OCT</div> </div> <div class="td1"> <div class="div1">11</div> <div>NOV</div> </div> <div class="td1"> <div class="div1">12</div> <div>DEC</div> </div> </div> <div class="txt" id="text"></div> </div> </body> <script type="text/javascript"> </script> </html>
效果图:
心得体会:布局很重要!一开始的时候用表格来做,做了好久都得到满意的效果,结果一怒之下,果断抛弃table,全部用div布局,果然一下子就出了效果,心里还在沾沾自喜,觉得div可以做到一切;但是,没想到的是,这个项目主要要用到js 的document.getElementsByTagName()这个方法,面对满屏的div我有点傻眼,为什么只能通过标签来得到元素呢,为什么不能通过类名来得到元素呢?!唉,不开心,想用 JQuery.