javascript学习之时间组件

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

先有一个HTML文件：

 1 <!doctype>
 2 <html>
 3 <head>
 4 <title></title>
 5 <style>
 6 
 7 </style>
 8 <script src="calendar.js"></script>
 9 <script>
10 window.onload=function(){
11     myCalendar("date");
12 }
13 </script>
14 </head>
15 <body>
16 <form action="a.html">
17     <div style="position:relative; left:100px; top:10px;">
18         买票日期:<input type="text" name="date">
19     </div>
20     
21 </form>
22 </body>
23 </html>

View Code

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

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

View Code

下边是Js文件：

  1 (function(){
  2     function getPos(obj){
  3         var t=0;
  4         var l=0;
  5         while(obj){
  6             t+=obj.offsetTop;
  7             l+=obj.offsetLeft;
  8             obj=obj.offsetParent;
  9         }
 10         return {top:t,left:l};
 11     }
 12     var added=false;//用来判断是否加载边Css文件
 13     
 14     window.myCalendar = function(name){
 15         var oInput = document.getElementsByName(name)[0];
 16         var oBox = document.createElement("div");
 17         oBox.className = 'calendar';
 18         oBox.setAttribute('id','calendar');
 19         
 20         oInput.onclick = function(ev){
 21             var oEvent = ev || event;
 22             oEvent.cancelBubble = true;
 23         }
 24         
 25         oInput.onfocus = function(){
 26             oBox.style.display = 'block';
 27             oBox.style.left = getPos(oInput).left+'px';
 28             oBox.style.top = getPos(oInput).top+oInput.offsetHeight+'px';
 29             
 30         }
 31         
 32         // var onClicked = oBox.onclick = (function(){return true})();
 33         oBox.innerHTML='<a href="javascript:;" class="prev" id="prevMonty">←</a>'
 34             +'<a href="javascript:;" class="next" id="nextMonty">→</a>'
 35             +'<h3 id="h3">2014年3月</h3>                        '
 36             +'<ol>                                      '
 37             +'<li>一</li>                               '
 38             +'<li>二</li>                               '
 39             +'<li>三</li>                               '
 40             +'<li>四</li>                               '
 41             +'<li>五</li>                               '
 42             +'<li class="week">六</li>                  '
 43             +'<li class="week">日</li>                  '
 44             +'</ol>                                     '
 45             +'<ul>                                      '
 46             +'</ul>';
 47         document.body.appendChild(oBox);
 48         /*var oDiv = document.getElementById("calendar");*/
 49         var oUl = oBox.getElementsByTagName("ul")[0];
 50         
 51         var oPrev = document.getElementById('prevMonty');
 52         var oNext = document.getElementById("nextMonty");
 53         
 54         var oH3 = document.getElementById("h3");
 55         var iNow = 0;
 56         
 57         function reFresh(){
 58             oUl.innerHTML = '';//清空Ul
 59             //本月的1号是周几
 60             function getFirstDay(){
 61                 var oDate = new Date();
 62                 
 63                 
 64                 
 65                 oDate.setMonth(oDate.getMonth()+iNow);
 66                 oDate.setDate(1);//将时间设置到本月的1号
 67                 return oDate.getDay();
 68             }
 69             var w = getFirstDay();
 70             if(w==0)w=7;//如果是周日，就让它等于7
 71             //创建空白Li
 72             for(var i=0;i<w;i++){
 73                 var oLi = document.createElement("li");
 74                 oUl.appendChild(oLi);
 75             }
 76             //本月的天数
 77             function getDays(){
 78                 var oDate = new Date();
 79                 
 80                 oDate.setDate(1);
 81                 
 82                 oDate.setMonth(oDate.getMonth()+iNow);
 83                 oDate.setMonth(oDate.getMonth()+1);//将日期调到下一个月
 84                 oDate.setDate(0);//将日期调到上个月的最后一天
 85                 return oDate.getDate();
 86             }
 87             var d = getDays();
 88             //创建Li
 89             for(var i=0;i<d;i++){
 90                 var oLi = document.createElement("li");
 91                 oLi.innerHTML = i+1;
 92                 
 93                 //li点击事件
 94                 oLi.onclick = function(){
 95                     onClickBox = true;
 96                     var oDate = new Date();
 97                     
 98                     oDate.setDate(1);
 99                     
100                     oDate.setMonth(oDate.getMonth()+iNow);
101                     
102                     oInput.value = oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+this.innerHTML;
103                     oBox.style.display = 'none';
104                 }
105                 oUl.appendChild(oLi);
106             }
107             //周末变红
108             for(var i=0;i<oUl.children.length;i++){
109                 if(i%7==0 || i%7==6){
110                     oUl.children[i].className = "week";
111                 }
112             }
113             if(iNow < 0){
114                 for(var i=0;i<oUl.children.length;i++){
115                     oUl.children[i].className = 'pass';
116                 }
117             }else if(iNow > 0){
118             
119             }else{
120                 //让过去的变灰，当前的高亮
121                 var oDate = new Date();
122                 oDate.setMonth(oDate.getMonth()+iNow);
123                 var today = oDate.getDate();
124                 for(var i=0;i<oUl.children.length;i++){
125                     if(oUl.children[i].innerHTML < today){
126                         oUl.children[i].className = 'pass';
127                     }else if(oUl.children[i].innerHTML == today){
128                         oUl.children[i].className = 'today';
129                     }
130                 }
131             }
132             
133             var oDate = new Date();
134             oDate.setDate(1);
135             oDate.setMonth(oDate.getMonth()+iNow);
136             oH3.innerHTML = oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月';
137         }
138         reFresh();
139         oNext.onclick = function(){
140             iNow++;
141             reFresh();
142         }
143         oPrev.onclick = function(){
144             iNow--;
145             reFresh();
146         }
147         oBox.onclick = function(ev){
148             var oEvent = ev || event;
149             if(window.event){
150                 oEvent.cancelBubble = true;
151             }else{
152                 oEvent.stopPropagation();
153             }
154             
155         }
156         //css文件加载
157         if(added)return;
158         added = true;
159         var oLink = document.createElement('link');
160         oLink.rel = "stylesheet";
161         oLink.href="calendar.css";
162         oLink.type = "text/css";
163         
164         var oHead = document.getElementsByTagName('head')[0];
165         oHead.appendChild(oLink);
166         
167         
168     }
169     document.onclick = function(){
170         var oBox = document.getElementById('calendar');
171         oBox.style.display = 'none';
172     }
173 })();

View Code