javascript簡易日曆製作

學習記錄

01.練習數組的用法

02.理解this.index的用法

03.綁定事件深入練習理解

html代碼

 1 <div id="date">
 2     <ul id="uldate">
 3         <li class="active">1月</li>
 4         <li>2月</li>
 5         <li>3月</li>
 6         <li>4月</li>
 7         <li>5月</li>
 8         <li>6月</li>
 9         <li>7月</li>
10         <li>8月</li>
11         <li>9月</li>
12         <li>10月</li>
13         <li>11月</li>
14         <li>12月</li>
15     </ul>
16     <div class="clear"></div>
17     <div class="content" id="text">
18         
19     </div>
20 </div>

css樣式基礎美化

 1 @charset "utf-8";
 2 /* CSS Document */
 3 *{
 4     margin:0;
 5     padding:0;
 6 }
 7 #date{
 8     width:500px;
 9     margin: 0 auto;
10 }
11 ul{
12     padding: 0;
13     list-style: none;
14 }
15 
16 ul li{
17     float: left;
18     width:120px;
19     height: 120px;
20     background: rgba(98,96,96,1.00);
21     text-align: center;
22     line-height: 120px;
23     border: rgba(243,236,237,1.00) solid 1px;
24     color: aliceblue;
25     font-size: 24px;
26     font-weight: bold;
27 }
28 .clear{
29     clear: both;
30 }
31 .content{
32     
33     border: #2B2B2B solid 1px;
34 }
35 .content h3{
36     background: #A20002;
37     line-height: 35px;
38     padding-left: 15px;
39     color: aliceblue;
40 }
41 .content p{
42     color: rgba(103,103,103,1.00);
43     line-height: 25px;
44     padding: 10px;
45 }
46 .active{
47     background: #FFFFFF;
48     border: #535353 solid 1px;
49     color:#CB0DF5;
50 }

JavaScript效果實現

 1 var oLi=document.getElementsByTagName('li');
 2 var oTxt=document.getElementById('text');
 3 var i=0;
 4 var arr=[
 5     '一月份相關內容',
 6     '二月份相關內容',
 7     '三月份相關內容',
 8     '四月份相關內容',
 9     '五月份相關內容',
10     '六月份相關內容',
11     '七月份相關內容',
12     '八月份相關內容',
13     '九月份相關內容',
14     '十月份相關內容',
15     '十一月份相關內容',
16     '十二月份相關內容'
17 ]
18 for(i=0;i<oLi.length;i++){
19     oLi[i].index=i;    //獲取當前索引的值，i必須是一個循環的變量
20     oTxt.innerHTML="<h3>"+1+"月活動標題</h3><p>"+arr[0]+"</p>"; //鼠標未移入前顯示當前月份，有待完善
21     oLi[i].onmouseover=function(){
22         for(i=0;i<oLi.length;i++){
23             oLi[i].className="";    
24         }
25             this.className="active";
26
27             oTxt.innerHTML="<h3>"+(this.index+1)+"月活動標題</h3><p>"+arr[this.index]+"</p>";   //this.index打印當前索引的值
28     }
29     
30 }