好久没来博客里更新了,最近发生了太多事要去处理,一直没时间来更新博客,如果您持续关注却没看到更新,抱歉,让您久等了,今天一次性更新两篇,先说说这一篇,几个月以前写过一款日期插件,当时写完觉得很牛,这么难的都写出来了,现在觉得也就那样,静下心来谁都能写出来,于是在闲余时间自己重新写了一款日期插件。
我先介绍一下这个日期插件,这次写的时候考虑到性能问题,我让日期的DOM元素只加载一次,再次点击的时候只是改变里面的内容,就是改变里面填充的日期,这样不会出现每次进行点击的时候都会加载一次DOM这样尴尬的事情了。
下面的逻辑和几个月前写的很像,只是进行了部分的优化,大家在看代码的时候就能看到这些逻辑上的优化。
/** * Created by dave on 2015/8/4. *chenchuanjiang */ function Gen_ele(){ //生成日期的区域 var date_holder_Ele=addelement("div","date-holder","date-holder"); //生成年月的区域 var ym_Ele=addelement("div","year-month",""); //生成年的区域 var year_Ele=addelement("div","year",""); //生成月的区域 var month_Ele=addelement("div","month",""); //生成年操作的区域 var y_decrease_Ele=addelement("div","y-decrease",""); var y_input_Ele=addelement("input","y-input",""); var y_increase_Ele=addelement("div","y-increase",""); //生成月操作的区域 var m_decrease_Ele=addelement("div","m-decrease",""); var m_input_Ele=addelement("input","m-input",""); var m_increase_Ele=addelement("div","m-increase",""); var tabholder_Ele=addelement("div","tab-holder",""); var ul_Ele=addelement("ul","date-ul",""); var li_Ele; for(var i=0;i<49;i++){ li_Ele=addelement("li","",""); ul_Ele.appendChild(li_Ele); } date_holder_Ele.appendChild(ym_Ele); ym_Ele.appendChild(year_Ele); year_Ele.appendChild(y_decrease_Ele); year_Ele.appendChild(y_input_Ele); year_Ele.appendChild(y_increase_Ele); ym_Ele.appendChild(month_Ele); month_Ele.appendChild(m_decrease_Ele); month_Ele.appendChild(m_input_Ele); month_Ele.appendChild(m_increase_Ele); date_holder_Ele.appendChild(tabholder_Ele); tabholder_Ele.appendChild(ul_Ele); y_decrease_Ele.innerHTML="-"; y_increase_Ele.innerHTML="+"; m_decrease_Ele.innerHTML="-"; m_increase_Ele.innerHTML="+"; y_decrease_Ele.innerText="-"; y_increase_Ele.innerText="+"; m_decrease_Ele.innerText="-"; m_increase_Ele.innerText="+"; document.getElementsByTagName("body")[0].appendChild(date_holder_Ele); } function addelement(tagname,classname,idname){ var elem = document.createElement(tagname); elem.className=classname; elem.id=idname; return elem; } Gen_ele(); function main(option){ this.parentNode=option.parentNode; this.target=option.target; this.startDate=option.startDate||new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/01"; this.endDate=option.endDate||"2016/08/21"; this.startymd = this.startDate.split("/"); this.starty = this.startymd[0]; this.startm = this.startymd[1]; this.startd = this.startymd[2]; this.truestartDate = new Date(this.starty+"/"+this.startm+"/"+this.startd); //this.default_date=new Date(); this.date_holder=document.getElementById("date-holder"); } main.prototype={ init:function(){ this.date_holder.style.left=this.offsetLeft(this.target)+"px"; this.date_holder.style.top=this.offsetTop(this.target)+this.target.offsetHeight+"px"; this.days=["日","一","二","三","四","五","六"]; this.inputy=this.filterdiv(this.date_holder,"input","y-input"); this.inputm=this.filterdiv(this.date_holder,"input","m-input"); this.date_ydes=this.filterdiv(this.date_holder,"div","y-decrease"); this.date_yinc=this.filterdiv(this.date_holder,"div","y-increase"); this.date_mdes=this.filterdiv(this.date_holder,"div","m-decrease"); this.date_minc=this.filterdiv(this.date_holder,"div","m-increase"); this.liArray = this.date_holder.getElementsByTagName("ul")[0]; this.data_pad(); this.bindfunc(); }, data_pad:function(){ console.log(this.startDate); this.startymdpri = this.startDate.split("/"); this.startypri = this.startymdpri[0]; this.startmpri = this.startymdpri[1]; this.inputy.value = this.startypri; this.inputm.value = this.startmpri; //开始日期是星期几 this.startdaynum = new Date(this.startypri+"/"+this.startmpri+"/01").getDay(); var lis = this.date_holder.getElementsByTagName("ul")[0].getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ if(i<7){ lis[i].innerHTML=this.days[i]; lis[i].innerText=this.days[i]; } else if(i>=7){ var startDate = new Date(this.startDate); var startDatem = new Date(this.startDate); var startDatef=new Date(this.startypri+"/"+this.startmpri+"/01"); var startDatefm=new Date(this.startypri+"/"+this.startmpri+"/01"); if(this.startdaynum>0){ for(var j=this.startdaynum-1;j>=0;j--){ lis[7+j].innerHTML=new Date((startDate/1000-86400)*1000).getDate(); lis[7+j].innerText=new Date((startDate/1000-86400)*1000).getDate(); lis[7+j].style.color="#ccc"; startDate = new Date((startDate/1000-86400)*1000); } for(var j=this.startdaynum;j<lis.length-7;j++){ lis[7+j].innerHTML=new Date(startDatem).getDate(); lis[7+j].innerText=new Date(startDatem).getDate(); if((startDatem.getMonth()+1) != (new Date(this.startDate).getMonth()+1)||startDatem<this.truestartDate||startDatem>new Date(this.endDate)){ lis[7+j].style.color="#ccc"; } else{ lis[7+j].style.color="#000"; } startDatem = new Date((startDatem/1000+86400)*1000); } }else if(this.startdaynum==0){ for(var k=6;k>=0;k--){ lis[7+k].innerHTML=new Date((startDatefm/1000-86400)*1000).getDate(); lis[7+k].innerText=new Date((startDatefm/1000-86400)*1000).getDate(); lis[7+k].style.color="#ccc"; startDatefm = new Date((startDatefm/1000-86400)*1000); } for(var j=this.startdaynum;j<lis.length-14;j++){ lis[14+j].innerHTML=new Date(startDatef).getDate(); lis[14+j].innerText=new Date(startDatef).getDate(); if((startDatef.getMonth()+1) != (new Date(this.startDate).getMonth()+1)||startDatef<this.truestartDate||startDatef>new Date(this.endDate)){ lis[14+j].style.color="#ccc"; } else{ lis[14+j].style.color="#000"; } startDatef = new Date((startDatef/1000+86400)*1000); } } } } }, offsetTop:function( elements ){ var top = elements.offsetTop; var parent = elements.offsetParent; while( parent != null ){ top += parent.offsetTop; parent = parent.offsetParent; }; return top; }, offsetLeft:function( elements ){ var left = elements.offsetLeft; var parent = elements.offsetParent; while( parent != null ){ left += parent.offsetLeft; parent = parent.offsetParent; }; return left; }, filterdiv:function(parentn,e,classn){ var elems = parentn.getElementsByTagName(e); for(var a=0;a<elems.length;a++){ if(elems[a].className==classn){ return elems[a]; break; }else{ continue; } } }, bindfunc:function(){ var _this=this; this.liArray.onmouseover=function(ev){ var ev = ev.target||window.event.srcElement; var date_text=ev.innerHTML||ev.innerText; if(ev.style.color!="rgb(204, 204, 204)"&&"一二三四五六日".indexOf(date_text)<0){ ev.style.backgroundColor="#eee"; ev.style.cursor="pointer"; } }; this.liArray.onmouseout=function(ev){ var ev = ev.target||window.event.srcElement; ev.style.backgroundColor="#fff"; }; this.date_ydes.onclick=function(ev){ var ev = ev.target||window.event.srcElement; var type="decrease"; _this.yearchange(_this,type,ev); }; this.date_yinc.onclick=function(ev){ var ev = ev.target||window.event.srcElement; var type="increase"; _this.yearchange(_this,type,ev); }; this.date_mdes.onclick=function(ev){ var ev = ev.target||window.event.srcElement; var type="decrease"; _this.monthchange(_this,type,ev); }; this.date_minc.onclick=function(ev){ var ev = ev.target||window.event.srcElement; var type="increase"; _this.monthchange(_this,type,ev); }; //此处省略一万字 //这里是对于点击外面让日历本身消失,只有点击目标位置才会让日历一直显示。 document.onclick=function(ev){ var ev = ev.target||window.event.srcElement; if(ev.className==null||ev.className==""||ev.parentNode!=_this.parentNode){ if(ev.parentNode.parentNode.className=="year-month"||ev.parentNode.className=="year-month"||ev.className=="year-month"){ _this.date_holder.style.display="block"; }else if(ev.parentNode.parentNode.className=="tab-holder"){ if(ev.style.color!="rgb(204, 204, 204)"&&"一二三四五六日".indexOf(ev.innerHTML||ev.innerText)<0){ _this.target.value=_this.inputy.value+"/"+_this.inputm.value+"/"+ev.innerHTML||ev.innerText; _this.date_holder.style.display="none"; } }else{ _this.date_holder.style.display="none"; } //_this.date_holder.style.display="none"; }else if(ev.className!=null&&ev.className!=""&&ev.parentNode==_this.parentNode){ console.log(ev.parentNode==_this.parentNode); _this.date_holder.style.display="block"; } } }, yearchange:function(_this,type,ev){ if(type=="decrease"){ _this.inputy.value-=1; } else{ _this.inputy.value=_this.inputy.value-0+1; } _this.startDate=_this.inputy.value+"/"+_this.inputm.value+"/01"; _this.data_pad(); }, monthchange:function(_this,type,ev){ if(type=="decrease"&&_this.inputm.value>1){ _this.inputm.value-=1; } else if(_this.inputm.value<12&&type=="increase"){ _this.inputm.value=_this.inputm.value-0+1; } _this.startDate=_this.inputy.value+"/"+_this.inputm.value+"/01"; _this.data_pad(); } };
之前刚写好的时候是可以兼容到IE7的,IE6没有专门去测试,后来添加了一个点击特定区域的时候让日期界面消失,点击某些位置保持一直存在的时候可能没有很好的做好兼容性,导致在IF9一下会有问题,在新版本浏览器上基本没问题。
语文不好就不多说废话了,希望您看完能不吝赐教,提出您宝贵的意见。