JavaScript简易日历

HTML部分

  
    
  
        
1
一月
  
        
2
二月
  
        
3
三月
  
        
4
四月
  
        
5
五月
  
        
6
六月
  
        
7
七月
  
        
8
八月
  
        
9
九月
  
        
10
十月
  
        
11
十一月
  
        
12
十二月
  
    
  
    

        
1月份安排
        
快过年了，大家可以商量着去哪玩吧～
    
   
  

CSS部分

* { 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; } 

JavaScript部分

window.onload=function(){
var aDatas=[
  "快过年了，大家可以商量着去哪玩吧～",
  "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
  "HTML5开发课程，让你熟练掌握移动应用开发技术",
  "精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式 - 智能课堂 - www.zhinengshe.com",
  "熟练掌握AJAX技术及相关应用（例如：新浪微博级应用） - 智能课堂 - www.zhinengshe.com",
  "可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……） - 智能课堂 - www.zhinengshe.com",
  "精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网 - 智能课堂 - www.zhinengshe.com",
  "掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂 - www.zhinengshe.com",
  "精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 智能课堂 - www.zhinengshe.com",
  "能独立开发表现和性能都很优秀的RIA应用 - 智能课堂 - www.zhinengshe.com",
  "了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 智能课堂 - www.zhinengshe.com",
  "熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂 - www.zhinengshe.com"
];
var oDiv = document.getElementById('tab');
var aLi = oDiv.getElementsByTagName('li');
var oTxt = oDiv.getElementsByTagName('div')[0];

for(var i=0; i
'+ aDatas[this.index]+'
';
    };
}

};