经常使用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://www.jb51.net/article/32572.htm

以下是实现的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.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(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.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(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.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.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].onclick=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>

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