javascript制作简易日历，月份信息已经放在一个数组中，在<script>...</script>中编写代码实现其功能

 

 

实现步骤

　　a） 获取需要操作的dom对象

　　b） 在所有的li上添加鼠标经过的事件

　　c） 在li的鼠标经过的事件中将所有li的class设置为空，并将当前li的class设置为“active”，同时利用innerHTML方法在id为text的div中设置html代码

 

     
     
     
    
      
        
       
1
JAN
        
       
2
FER
        
       
3
MAR
        
       
4
APR
        
       
5
MAY
        
       
6
JUN
        
       
7
JUL
        
       
8
AUG
        
       
9
SEP
        
       
10
OCT
        
       
11
NOV
        
       
12
DEC
    
      
        
      
        
       
1月活动
        
       
快过年了，大家可以商量着去哪玩吧～
    
      
     

 

@charset "utf-8";/* CSS Document */* {
     padding: 0; margin: 0; }li {
     list-style: none; }body {
     background: #f6f9fc; font-family: arial; }.calendar {
     width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }.calendar ul {
     width: 210px; overflow: hidden; padding-bottom: 10px; }.calendar li {
     float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }.calendar li h2 {
     font-size: 20px; padding-top: 5px; }.calendar li p {
     font-size: 14px; }.calendar .active {
     border: 1px solid #424242; background: #fff; color: #e84a7e; }.calendar .active h2 { }.calendar .active p {
     font-weight: bold; }.calendar .text {
     width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }.calendar .text h2 {
    font-size: 14px; margin-bottom: 10px; }.calendar .text p {
     font-size: 12px; line-height: 18px; }

 

 

 

window.onload = function () {    //(a)获取需要操作的dom对象    var lis = document.getElementsByTagName('li');    var textDiv = document.getElementsByClassName('text')[0];    //(b)在所有的li上添加鼠标经过的事件    for (var i = 0; i < lis.length; i ++) {        lis[i].index = i;        lis[i].onmouseover = function () {            //(c)在li的鼠标经过的事件中将所有li的class设置为空            for (var i = 0; i < lis.length; i ++) {                lis[i].className = '';            }            //将当前li的class设置为“active”            this.className = 'active';            var month = this.index + 1;            //利用innerHTML方法在id为text的div中设置html代码（代码参考初始代码）            textDiv.innerHTML = '
' + month + '月活动
' + aDatas[this.index] + '
';        }    }}

 

 

分割线===================================

 

　　可通过console.log(this.index)查看鼠标经过时this.index所指的值

 

 

window.onload = function () {    //(a)获取需要操作的dom对象    var lis = document.getElementsByTagName('li');    var textDiv = document.getElementsByClassName('text')[0];    //(b)在所有的li上添加鼠标经过的事件    for (var i = 0; i < lis.length; i ++) {        lis[i].index = i;        lis[i].onmouseover = function () {            //(c)在li的鼠标经过的事件中将所有li的class设置为空            for (var i = 0; i < lis.length; i ++) {                lis[i].className = '';            }            //将当前li的class设置为“active”            this.className = 'active';            var month = this.index + 1;            //利用innerHTML方法在id为text的div中设置html代码（代码参考初始代码）            textDiv.innerHTML = '
' + month + '月活动
' + aDatas[this.index] + '
';            console.log(this.index)        }    }}