javascript学习之时间组件

写了一个时间组件，哪里需要哪里调（菜鸟级别，大牛路过就Ok了）：

先有一个HTML文件：

 <!doctype>
 <html>
 <head>
 <title></title>
 <style>

 </style>
 <script src="calendar.js"></script>
 <script>
 window.onload=function(){
     myCalendar("date");
 }
 </script>
 </head>
 <body>
 <form action="a.html">
     <div style="position:relative; left:100px; top:10px;">
         买票日期:<input type="text" name="date">
     </div>

 </form>
 </body>
 </html>

接下来是一个Css样式文件：

 *{margin:0px;padding:0px;list-style:none;}
 .calendar{width:210px;border:1px solid #000; margin:0 auto;position:absolute;display:none;}
 .calendar h3{ height:30px; line-height:30px; text-align:center;}
 .calendar ol{ overflow:hidden; border-bottom:1px solid #ccc;}
 .calendar ol li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;}
 .calendar ul {overflow:hidden;}
 .calendar ul li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;font-family:"微软雅黑";font-size:14px;}
 .calendar .week{ color:red;}
 .calendar .pass{color:#ccc;}
 .calendar .today{color:#fff;background:#f60;}
 .calendar .prev,.calendar .next{position:absolute; top:10px; text-decoration:none;}
 .calendar .prev{ left:10px;}
 .calendar .next{ right:10px;}
 /*.calendar #h3{font-family:"微软雅黑";font-weight:normal;font-size:16px;}*/

下边是Js文件：

 (function(){
     function getPos(obj){
         var t=0;
         var l=0;
         while(obj){
             t+=obj.offsetTop;
             l+=obj.offsetLeft;
             obj=obj.offsetParent;
         }
         return {top:t,left:l};
     }
     var added=false;//用来判断是否加载边Css文件

     window.myCalendar = function(name){
         var oInput = document.getElementsByName(name)[0];
         var oBox = document.createElement("div");
         oBox.className = 'calendar';
         oBox.setAttribute('id','calendar');

         oInput.onclick = function(ev){
             var oEvent = ev || event;
             oEvent.cancelBubble = true;
         }

         oInput.onfocus = function(){
             oBox.style.display = 'block';
             oBox.style.left = getPos(oInput).left+'px';
             oBox.style.top = getPos(oInput).top+oInput.offsetHeight+'px';

         }

         // var onClicked = oBox.onclick = (function(){return true})();
         oBox.innerHTML='<a href="javascript:;" class="prev" id="prevMonty">←</a>'
             +'<a href="javascript:;" class="next" id="nextMonty">→</a>'
             +'<h3 id="h3">2014年3月</h3>                        '
             +'<ol>                                      '
             +'<li>一</li>                               '
             +'<li>二</li>                               '
             +'<li>三</li>                               '
             +'<li>四</li>                               '
             +'<li>五</li>                               '
             +'<li class="week">六</li>                  '
             +'<li class="week">日</li>                  '
             +'</ol>                                     '
             +'<ul>                                      '
             +'</ul>';
         document.body.appendChild(oBox);
         /*var oDiv = document.getElementById("calendar");*/
         var oUl = oBox.getElementsByTagName("ul")[0];

         var oPrev = document.getElementById('prevMonty');
         var oNext = document.getElementById("nextMonty");

         var oH3 = document.getElementById("h3");
         var iNow = 0;

         function reFresh(){
             oUl.innerHTML = '';//清空Ul
             //本月的1号是周几
             function getFirstDay(){
                 var oDate = new Date();

                 oDate.setMonth(oDate.getMonth()+iNow);
                 oDate.setDate(1);//将时间设置到本月的1号
                 return oDate.getDay();
             }
             var w = getFirstDay();
             if(w==0)w=7;//如果是周日，就让它等于7
             //创建空白Li
             for(var i=0;i<w;i++){
                 var oLi = document.createElement("li");
                 oUl.appendChild(oLi);
             }
             //本月的天数
             function getDays(){
                 var oDate = new Date();

                 oDate.setDate(1);

                 oDate.setMonth(oDate.getMonth()+iNow);
                 oDate.setMonth(oDate.getMonth()+1);//将日期调到下一个月
                 oDate.setDate(0);//将日期调到上个月的最后一天
                 return oDate.getDate();
             }
             var d = getDays();
             //创建Li
             for(var i=0;i<d;i++){
                 var oLi = document.createElement("li");
                 oLi.innerHTML = i+1;

                 //li点击事件
                 oLi.onclick = function(){
                     onClickBox = true;
                     var oDate = new Date();

                     oDate.setDate(1);

                     oDate.setMonth(oDate.getMonth()+iNow);

                     oInput.value = oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+this.innerHTML;
                     oBox.style.display = 'none';
                 }
                 oUl.appendChild(oLi);
             }
             //周末变红
             for(var i=0;i<oUl.children.length;i++){
                 if(i%7==0 || i%7==6){
                     oUl.children[i].className = "week";
                 }
             }
             if(iNow < 0){
                 for(var i=0;i<oUl.children.length;i++){
                     oUl.children[i].className = 'pass';
                 }
             }else if(iNow > 0){

             }else{
                 //让过去的变灰，当前的高亮
                 var oDate = new Date();
                 oDate.setMonth(oDate.getMonth()+iNow);
                 var today = oDate.getDate();
                 for(var i=0;i<oUl.children.length;i++){
                     if(oUl.children[i].innerHTML < today){
                         oUl.children[i].className = 'pass';
                     }else if(oUl.children[i].innerHTML == today){
                         oUl.children[i].className = 'today';
                     }
                 }
             }

             var oDate = new Date();
             oDate.setDate(1);
             oDate.setMonth(oDate.getMonth()+iNow);
             oH3.innerHTML = oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月';
         }
         reFresh();
         oNext.onclick = function(){
             iNow++;
             reFresh();
         }
         oPrev.onclick = function(){
             iNow--;
             reFresh();
         }
         oBox.onclick = function(ev){
             var oEvent = ev || event;
             if(window.event){
                 oEvent.cancelBubble = true;
             }else{
                 oEvent.stopPropagation();
             }

         }
         //css文件加载
         if(added)return;
         added = true;
         var oLink = document.createElement('link');
         oLink.rel = "stylesheet";
         oLink.href="calendar.css";
         oLink.type = "text/css";

         var oHead = document.getElementsByTagName('head')[0];
         oHead.appendChild(oLink);

     }
     document.onclick = function(){
         var oBox = document.getElementById('calendar');
         oBox.style.display = 'none';
     }
 })();