JS制作簡易日歷

日歷描述：有12個月，鼠標指向哪個月就會在下方顯示月數和當月活動。

思路：

1、獲取元素。

2、用數組定義月份內容

3、for循環歷遍li元素添加鼠標指向事件。

4、for循環歷遍li元素去掉li樣式。

5、為當前li元素添加樣式。

6、用innerHTML追加當前月份內容。

 

JS代碼：

<script>
var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',];
window.onload=function(){
    var tab=document.getElementById('tab');
    var ul=tab.getElementsByTagName('ul')[0];
    var li=ul.getElementsByTagName('li');
    var div=tab.getElementsByTagName('div')[0];

    var i=0;
    for(i=0;i<li.length;i++){
       li[i].index=i;
       li[i].onmouseover=function(){
         for(i=0;i<li.length;i++){
            li[i].className='';
         };
         this.className='active';
         div.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+neirong[this.index]'+'</p>
       };
    };
};
</script>

 

HTML代碼：

<div id="tab" class="calendar">

    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text">
        <h2>1月活動</h2>
        <p>快過年了，大家可以商量着去哪玩吧～</p>
    </div>

</div>