JS制作简易日历

日历描述：有12个月，鼠标指向哪个月就会在下方显示月数和当月活动。

思路：

1、获取元素。

2、用数组定义月份内容

3、for循环历遍li元素添加鼠标指向事件。

4、for循环历遍li元素去掉li样式。

5、为当前li元素添加样式。

6、用innerHTML追加当前月份内容。

 

JS代码：

 1 <script>
 2 var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',];
 3 window.onload=function(){
 4     var tab=document.getElementById('tab');
 5     var ul=tab.getElementsByTagName('ul')[0];
 6     var li=ul.getElementsByTagName('li');
 7     var div=tab.getElementsByTagName('div')[0];
 8 
 9     var i=0;
10     for(i=0;i<li.length;i++){
11        li[i].index=i;
12        li[i].onmouseover=function(){
13          for(i=0;i<li.length;i++){
14             li[i].className='';
15          };
16          this.className='active';
17          div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+neirong[this.index]'+'</p>
18        };
19     };
20 };
21 </script>

 

HTML代码：

 1 <div id="tab" class="calendar">
 2 
 3     <ul>
 4         <li class="active"><h2>1</h2><p>JAN</p></li>
 5         <li><h2>2</h2><p>FER</p></li>
 6         <li><h2>3</h2><p>MAR</p></li>
 7         <li><h2>4</h2><p>APR</p></li>
 8         <li><h2>5</h2><p>MAY</p></li>
 9         <li><h2>6</h2><p>JUN</p></li>
10         <li><h2>7</h2><p>JUL</p></li>
11         <li><h2>8</h2><p>AUG</p></li>
12         <li><h2>9</h2><p>SEP</p></li>
13         <li><h2>10</h2><p>OCT</p></li>
14         <li><h2>11</h2><p>NOV</p></li>
15         <li><h2>12</h2><p>DEC</p></li>
16     </ul>
17     
18     <div class="text">
19         <h2>1月活动</h2>
20         <p>快过年了，大家可以商量着去哪玩吧～</p>
21     </div>
22 
23 </div>

 

转载于:https://www.cnblogs.com/52css/archive/2013/02/27/2935766.html