Javascript implements calendar control (year, month, day close button)_javascript skills

Friends who often use Google must still remember Google’s gorgeous calendar control, so let’s implement one. Although the functions and effects are not comparable, the important thing is the implementation process.
The following is to be implemented HTML structure :

year:month:

< ;div id="biaoti">

Let’s talk about the calendar query algorithm first:
w= y parseInt(y/4) parseInt(c/4)-2*c parseInt(26*(m 1)/10) d-1;
The following is a detailed explanation process. If you are interested, you can read it:
http://www.jb51.net/article/32572.htm
The following is the implemented javascript code:

Copy code The code is as follows:

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;ivar 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;ivar 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;ivar option=document.createElement("option");
option.text=i;
select1.add(option);
}
body.style.height="70%";
for(var i=0;ivar span=document.createElement("span");
span.style.width="14%";
span.style.height="16%";
span.style.textAlign="center";
span.onmouseover=function(){
this.style.cursor="hand";
this.tempcolor=this.style.backgroundColor;
this.style.backgroundColor="lightblue";
}
span.onmouseout=function(){
this.style.backgroundColor=this.tempcolor;
}
span.onclick=function(){
target.value=select.options[select.selectedIndex].text "年" select1.options[select1.selectedIndex].text "月" this.innerText "日";
a.parentNode.removeChild(a);
}
body.appendChild(span);
}
select.onchange=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(ww=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;dbody.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;dbody.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.onchange=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(ww=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;dbody.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;dbody.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;s1if(parseInt(select.options[s1].text)==parseInt(date.getYear())){
select.options[s1].selected=true;
break;
}
}
for(var s2=0;s2if(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.onfocus=function(){
document.body.appendChild(a);
a.style.left=target.offsetLeft "px";;
a.style.top=target.offsetTop target.offsetHeight "px";
}
target.onblur=function(){
if(a && window.event.clientY>a.offsetTop && window.event.clientYa.offsetLeft && window.event.clientXreturn;
if(!a) return;
a.parentNode.removeChild(a);
}
body.all[41].innerText="关闭";
body.all[41].onclick=function(){
this.style.backgroundColor="";
a.parentNode.removeChild(a);

}
}
}

入口参数是要绑定的html对象,这里一般是text input.
下面是调用代码:







<script> <BR>sx.activex.calender.bind(document.getElementById("a")); <BR></script>


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