javascript简易日历制作

学习记录

01.练习数组的用法

02.理解this.index的用法

03.绑定事件深入练习理解

html代码

 <div id="date">
     <ul id="uldate">
         <li class="active">1月</li>
         <li>2月</li>
         <li>3月</li>
         <li>4月</li>
         <li>5月</li>
         <li>6月</li>
         <li>7月</li>
         <li>8月</li>
         <li>9月</li>
         <li>10月</li>
         <li>11月</li>
         <li>12月</li>
     </ul>
     <div class="clear"></div>
     <div class="content" id="text">
 
     </div>
 </div>

css样式基础美化

 @charset "utf-8";
 /* CSS Document */
 *{
     margin:;
     padding:;
 }
 #date{
     width:500px;
     margin: 0 auto;
 }
 ul{
     padding:;
     list-style: none;
 }
 
 ul li{
     float: left;
     width:120px;
     height: 120px;
     background: rgba(98,96,96,1.00);
     text-align: center;
     line-height: 120px;
     border: rgba(243,236,237,1.00) solid 1px;
     color: aliceblue;
     font-size: 24px;
     font-weight: bold;
 }
 .clear{
     clear: both;
 }
 .content{
 
     border: #2B2B2B solid 1px;
 }
 .content h3{
     background: #A20002;
     line-height: 35px;
     padding-left: 15px;
     color: aliceblue;
 }
 .content p{
     color: rgba(103,103,103,1.00);
     line-height: 25px;
     padding: 10px;
 }
 .active{
     background: #FFFFFF;
     border: #535353 solid 1px;
     color:#CB0DF5;
 }

JavaScript效果实现

 var oLi=document.getElementsByTagName('li');
 var oTxt=document.getElementById('text');
 var i=0;
 var arr=[
     '一月份相关内容',
     '二月份相关内容',
     '三月份相关内容',
     '四月份相关内容',
     '五月份相关内容',
     '六月份相关内容',
     '七月份相关内容',
     '八月份相关内容',
     '九月份相关内容',
     '十月份相关内容',
     '十一月份相关内容',
     '十二月份相关内容'
 ]
 for(i=0;i<oLi.length;i++){
     oLi[i].index=i;    //获取当前索引的值，i必须是一个循环的变量
     oTxt.innerHTML="<h3>"+1+"月活动标题</h3><p>"+arr[0]+"</p>"; //鼠标未移入前显示当前月份，有待完善
     oLi[i].onmouseover=function(){
         for(i=0;i<oLi.length;i++){
             oLi[i].className="";
         }
             this.className="active";
 
             oTxt.innerHTML="<h3>"+(this.index+1)+"月活动标题</h3><p>"+arr[this.index]+"</p>";   //this.index打印当前索引的值
     }
 
 }