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>
接下来是一个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;}*/
下边是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 })();
