javascript实现日历控件

      经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程.

下面是要实现的html结构:

<div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id="mface">月:<select id="month"></select></span></div><div id="biaoti"></div><div id="body"></div></div>
先说一下日历查询的算法:

w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

下面是详细的说明过程,有兴趣的可以去看下:

http://zhidao.baidu.com/question/58902135.html?si=7

以下是实现的javascript代码:

sx.activex.calender={ bind:function(target){ var a=document.createElement("div"); var head=document.createElement("div"); var biaoti=document.createElement("div"); var select=document.createElement("select"); var yface=document.createElement("span"); var mface=document.createElement("span"); var body=document.createElement("div"); var select1=document.createElement("select"); yface.appendChild(select); mface.appendChild(select1); head.appendChild(yface); head.appendChild(mface); a.appendChild(head); a.appendChild(biaoti); a.appendChild(body); yface.insertBefore(document.createTextNode("年 "),yface.firstChild) mface.insertBefore(document.createTextNode("月 "),mface.firstChild) a.style.position="absolute"; biaoti.style.height="10%"; for(var i=0;i<7;i++){ var can=document.createElement("span") can.style.width="14%"; can.style.height="100%"; can.style.textAlign="center"; biaoti.appendChild(can); } biaoti.all[0].innerText="日" biaoti.all[1].innerText="一" biaoti.all[2].innerText="二" biaoti.all[3].innerText="三" biaoti.all[4].innerText="四" biaoti.all[5].innerText="五" biaoti.all[6].innerText="六" head.style.height="20%"; a.style.position="absolute"; a.style.height="200px"; a.style.width="302px"; a.style.border="1px red solid"; yface.style.width="50%"; yface.style.padding="5px"; yface.style.height="100%"; select.style.width="80%"; for(var i=1960;i<2010;i++){ var option=document.createElement("option"); option.text=i; select.add(option); } mface.style.width="50%"; mface.style.padding="5px"; mface.style.height="100%"; select1.style.width="80%"; for(var i=1;i<=12;i++){ var option=document.createElement("option"); option.text=i; select1.add(option); } body.style.height="70%"; for(var i=0;i<42;i++){ var span=document.createElement("span"); span.style.width="14%"; span.style.height="16%"; span.style.textAlign="center"; span.οnmοuseοver=function(){ this.style.cursor="hand"; this.tempcolor=this.style.backgroundColor; this.style.backgroundColor="lightblue"; } span.οnmοuseοut=function(){ this.style.backgroundColor=this.tempcolor; } span.οnclick=function(){ target.value=select.options[select.selectedIndex].text+"年"+select1.options[select1.selectedIndex].text+"月"+this.innerText+"日"; a.parentNode.removeChild(a); } body.appendChild(span); } select.οnchange=function(){ for(var o in body.all){ body.all[o].innerText=""; if(o.toString()!="length") body.all[o].style.backgroundColor=""; } var year1=this.options[this.selectedIndex].text; var month1=select1.options[select1.selectedIndex].text; var y=parseInt(year1.substr(2,2)-0); var c=parseInt(year1.substr(0,2));; var m=parseInt(month1);; m=m>=3?m:(y=y-1,m+12); var d=1; var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ; if(w<0) w=w+700; w=w%7; switch(parseInt(month1)){ case 2: if(parseInt(year1)%4==0) var r=29; else var r=28; var day=w; for(var d=1;d<=r;d++){ body.all[day++].innerText=d; if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) body.all[day-1].style.backgroundColor="red"; body.all[41].innerText="关闭"; } break; default: if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12) var r=31; else var r=30; var day=w; for(var d=1;d<=r;d++){ body.all[day++].innerText=d; if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) body.all[day-1].style.backgroundColor="red"; body.all[41].innerText="关闭"; } break; } } select1.οnchange=function(){ for(var o in body.all){ body.all[o].innerText=""; if(o.toString()!="length") body.all[o].style.backgroundColor=""; } var month1=this.options[this.selectedIndex].text; var year1=select.options[select.selectedIndex].text; var y=parseInt(year1.substr(2,2)-0); var c=parseInt(year1.substr(0,2)); var m=parseInt(month1); m=m>=3?m:(y=y-1,m+12); var d=1; var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ; if(w<0) w=w+700; w=w%7; switch(parseInt(month1)){ case 2: if(parseInt(year1)%4==0) var r=29; else var r=28; var day=w; for(var d=1;d<=r;d++){ body.all[day++].innerText=d; if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) body.all[day-1].style.backgroundColor="red"; body.all[41].innerText="关闭"; } break; default: if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12) var r=31; else var r=30; var day=w; for(var d=1;d<=r;d++){ body.all[day++].innerText=d; if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate()) body.all[day-1].style.backgroundColor="red"; body.all[41].innerText="关闭"; } break; } } var date=new Date(); for(var s1=0;s1<select.options.length;s1++){ if(parseInt(select.options[s1].text)==parseInt(date.getYear())){ select.options[s1].selected=true; break; } } for(var s2=0;s2<select1.options.length;s2++){ if(parseInt(select1.options[s2].text)==parseInt(date.getMonth())+1){ select1.options[s2].selected=true; break; } } select.onchange(); for(var i in body.all){ if(body.all[i].innerText==date.getDate()){ body.all[i].style.backgroundColor="red"; } } target.οnfοcus=function(){ document.body.appendChild(a); a.style.left=target.offsetLeft+"px";; a.style.top=target.offsetTop+target.offsetHeight+"px"; } target.οnblur=function(){ if(a && window.event.clientY>a.offsetTop && window.event.clientY<a.offsetTop+a.offsetHeight && window.event.clientX>a.offsetLeft && window.event.clientX<a.offsetLeft+a.offsetWidth) return; if(!a) return; a.parentNode.removeChild(a); } body.all[41].innerText="关闭"; body.all[41].οnclick=function(){ this.style.backgroundColor=""; a.parentNode.removeChild(a); } } }

入口参数是要绑定的html对象,这里一般是text input.

下面是调用代码:

<html>
    <head>
        <title>Untitled Document</title>
    </head>
    <body>
        
        <script src="kongjian.js"></script>
         <input type="text" id="a">
        <script>
           sx.activex.calender.bind(document.getElementById("a"));
           
        </script>
    </body>
</html>

差不多就这样,代码比较冗长,不是很好,如果哪位朋友有更好的办法,请与我多多交流啊.