javascript写的小日历

var text;

var flag = 0;

var cx=0;

var cy=0;

var val=0;

var running=false;

var stx,sty;

function locate()

{ cx=window.event.x;

cy=window.event.y;

}

document.onmousemove=locate;

function mousemove(){

var x,y;

x=cx-stx;

y=cy-sty;

if(x<0) {x=0;}

if(y<0) {y=0;}

with(calendar.style)

{

left=x.toString()+"px";

top=y.toString()+"px";

}

function mousedown(){

with(calendar.style)

{

stx=cx-parseInt(left.substring(0,left.charAt('p')+1));

sty=cy-parseInt(top.substring(0,top.charAt('p')+1));

}

if(!running){

val=setInterval("mousemove()",10);

running=true;

}

else{

clearInterval(val);

running=false;

}

function mouseup(){

if(running){

clearInterval(val);

running=false;

}

function MakeCal(date,intCount) {

var z1, z2,blntoday

var today = new Date();

if (date == null) {

var szMonth = today.getMonth();

var szYear = today.getFullYear();

var szDate = today.getDate();

}

else {

z1 = date.indexOf("/");

z2 = date.indexOf("/", 3);

var szMonth = Number(date.slice(0,z1)) - 1;

var szYear = Number(date.slice(z2 + 1, z2+ 5));

if(szMonth < 0){

szMonth = 11;

szYear = szYear - 1;

}

else if(szMonth > 11){

szMonth = 0;

szYear = szYear + 1;

}

var szDate = Number(date.slice(z1 + 1,z2));

}

var x, intTemp, szId, max, todayx, startx;

var szStart = new Date(szYear, szMonth, 1);

var intDay = szStart.getDay();

var blSet = false;

var szCal;

szStart.setMonth(szMonth - 1);

var PrevMonth = szStart.getMonth();

var PrevYear = szStart.getFullYear();

szStart = new Date(szYear, szMonth, 1);

szStart.setMonth(szMonth + 1);

var NextMonth = szStart.getMonth();

var NextYear = szStart.getFullYear();

szStart = new Date(szYear, szMonth, 1);

szCal = "" ;

szCal = szCal + "<table id=tblBor width=100% border=0 bgcolor=#D6C7DA style=\"border-style:solid;border-width:1px;border-color:black\" cellspacing=0 cellpadding=0 align='center'><tr><td>";

szCal = szCal + "<table id=tblCal width=100% border=0 bgcolor=#E7EAE6 style=\"cursor:default;\" cellspacing=0 cellpadding=3 >";

if (szStart.getMonth() == (szMonth))

szCal = szCal + "<tr bgcolor=#BDE6E8 onmouseup=\"mouseup();\" onmousedown=\"mousedown()\"><td colspan=6 align=center id=title style=\"cursor:default;\"><div style=\"display:none;\" id=\"whoactive\">"+MakeString(szStart.getMonth())+"10</div>" +"<font color=#00009F>"+ MakeStringT(szMonth)+"</Font>" + " " +"<Font Color =#00009F>"+ szYear + "年"+"</font>"+"</td><td><input type=button value=&times style=\"background-color: #DFECEC; width: 18; height: 18\" onclick=\"calendar.style.visibility='hidden'\"></td></tr>";

else

szCal = szCal + "<tr bgcolor=#BDE6E8 onmouseup=\"mouseup();\" onmousedown=\"mousedown()\"><td colspan=6 align=center id=title style=\"cursor:default;\"><div style=\"display:none;\" id=\"whoactive\">"+MakeString(szStart.getMonth())+"10</div>" +"<font color=#7F7F7F>"+ MakeStringT(szMonth)+"</Font>" + " " +"<Font Color =#7F7F7F>"+ szYear + "年"+"</font>"+"</td><td><input type=button value=&times style=\"background-color: #DFECEC; width: 18; height: 18\" onclick=\"calendar.style.visibility='hidden'\"></td></tr>";

szCal = szCal + "<tr id=rowTitle style=\"cursor:default;\"><td><font color=#53A46B>日</font></td><td><font color=#0A13C0>一</font></td><td><font color=#0A13C0>二</font></td><td><font color=#0A13C0>三</font></td><td><font color=#0A13C0>四</font></td><td><font color=#0A13C0>五</font></td><td><font color=#53A46B>六</font></td></tr>";

for (x=1; x<43; x++) {

if (x % 7 == 1) {

szCal = szCal + "<tr>"

}

szStart = new Date(szYear, szMonth, 1);

intTemp = (-(intDay - x));

szStart.setDate(intTemp);

szId = MakeString(szStart.getMonth()) + x;

if (!blSet) {

if (szStart.getMonth() == (szMonth + 1)) {

blSet = true;

max = x;

}

if (szStart.getFullYear() == (szYear + 1)) {

blSet = true;

max = x;

}

blntoday = 0;

if (szStart.getDate() == today.getDate()) {

if (szStart.getMonth() == today.getMonth()) {

if (szStart.getYear() == today.getYear()) {

todayx = x;

blntoday = 1;

}

szCal = szCal + "<td ";

if(intCount == 0){

if (szStart.getMonth() == (szMonth)) {

if (szStart.getDate() == today.getDate()) {

szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','0');document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';\"";

}

else

{

}

else {

szCal = szCal + "onclick=\"MakeCal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','0')\"";

}

if(intCount == 1){

if (szStart.getMonth() == (szMonth)) {

if (szStart.getDate() == today.getDate()) {

szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1')document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';\"";

}

else

{

szCal = szCal + "onclick=\"setVal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1');document.getElementById(whoactive.innerHTML).style.backgroundColor=\'#E7EAE6\';this.style.backgroundColor=\'#aaaaaa\';whoactive.innerHTML=this.id;\"";

}

else {

szCal = szCal + "onclick=\"MakeCal('" + (szStart.getMonth() + 1 ) + "/" + szStart.getDate() + "/" + szStart.getFullYear() + "','1')\"";

}

if (blntoday == 1)

szCal = szCal + " id=" + szId + "><center><font color = Yellow>" + szStart.getDate() + "</font></td>";

else

szCal = szCal + " id=" + szId + "><center>" + szStart.getDate() + "</td>";

if (x % 7 == 0) {

szCal = szCal + "</tr>"

}

szCal = szCal + "</tr>";

szCal = szCal + "</table></td></tr>";

szCal = szCal + "<tr align=center><td><table border=0 bgcolor=#BDE6E8 width=100% cellspacing=0 cellpadding=3>";

szCal = szCal + "<tr>";

if(intCount == 0){

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (PrevMonth + 2) + "/1/" + (PrevYear - 1) + "','0')\"><font face=webdings>7</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (PrevMonth + 1) + "/1/" + PrevYear + "','0')\"><font face=webdings>3</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (NextMonth + 1) + "/1/" + NextYear + "','0')\"><font face=webdings>4</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + NextMonth + "/1/" + (NextYear + 1) + "','0')\"><font face=webdings>8</font></a></td>";

}

if(intCount == 1){

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (PrevMonth + 2) + "/1/" + (PrevYear - 1) + "','1')\"><font face=webdings>7</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (PrevMonth + 1) + "/1/" + PrevYear + "','1')\"><font face=webdings>3</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + (NextMonth + 1) + "/1/" + NextYear + "','1')\"><font face=webdings>4</font></a></td>";

szCal = szCal + "<td align=center style=\"cursor:hand;\"><a onclick=\"MakeCal('" + NextMonth + "/1/" + (NextYear + 1) + "','1')\"><font face=webdings>8</font></a></td>";

}

szCal = szCal + "</tr></table>";

szCal = szCal + "</td></tr></table>";

calendar.innerHTML = szCal;

for (x=intDay; x>0; x--) {

eval(MakeString(PrevMonth) + x + ".style.color = \"909090\"")

}

for (x=max; x<43; x++) {

eval(MakeString(NextMonth) + x + ".style.color = \"909090\"")

}

if (szMonth == today.getMonth()) {

if (szYear == today.getFullYear()) {

eval(MakeString(szMonth) + todayx + ".style.backgroundColor = \"#7F7F7F\"");

eval(MakeString(szMonth) + todayx + ".style.Color = \"yellow\"");

}

tblCal.style.color = "#00009F";

tblCal.style.fontFamily = "arial";

tblCal.style.cursor = "hand";

tblCal.style.fontSize = "10";

rowTitle.style.backgroundColor = "#BBD1EA";

//event.cancelBubble = true;

}

function MakeString(intMonth) {

var Month

switch (intMonth) {

case 0 :

Month = "JANUARY";

break;

case 1 :

Month = "FEBUARY";

break;

case 2 :

Month = "MARCH";

break;

case 3 :

Month = "APRIL";

break;

case 4 :

Month = "MAY";

break;

case 5 :

Month = "JUNE";

break;

case 6 :

Month = "JULY";

break;

case 7 :

Month = "AUGUST";

break;

case 8 :

Month = "SEPTEMBER";

break;

case 9 :

Month = "OCTOBER";

break;

case 10 :

Month = "NOVEMBER";

break;

case 11 :

Month = "DECEMBER";

}

return (Month);

}

function MakeStringT(intMonth) {

var Month

switch (intMonth) {

case 0 :

Month = "一月";

break;

case 1 :

Month = "二月";

break;

case 2 :

Month = "三月";

break;

case 3 :

Month = "四月";

break;

case 4 :

Month = "五月";

break;

case 5 :

Month = "六月";

break;

case 6 :

Month = "七月";

break;

case 7 :

Month = "八月";

break;

case 8 :

Month = "九月";

break;

case 9 :

Month = "十月";

break;

case 10 :

Month = "十一月";

break;

case 11 :

Month = "十二月";

}

return (Month);

}

function keepCal() {

event.cancelBubble = true;

}

function public_get_txtDate() {

return txtDate;

}

function public_get_value() {

return txtDate.value;

}

function getCal(intCount){

today=new Date();

nowyear=today.getYear();

nowmonth=today.getMonth()+1;

nowday=today.getDate();

currdate = nowmonth+'/'+nowday+'/'+nowyear;

MakeCal(currdate, 0)

intFlag = 1;

//calendar.style.left = iLeft;

//calendar.style.top = iTop;

calendar.style.visibility = 'visible';

//event.cancelBubble = true;

}

function setVal(date, intCount){

z1 = date.indexOf("/");

z2 = date.indexOf("/", 3);

var szMonth = date.slice(0,z1);

if (szMonth.length<2)

szMonth="0"+szMonth;

var szYear = date.slice(z2 + 1, z2+ 5);

if(szMonth < 0){

szMonth = 11;

szYear = szYear - 1;

}

else if(szMonth > 11){

szMonth = 0;

szYear = szYear + 1;

}

var szDate = date.slice(z1 + 1,z2);

if (szDate.length<2)

szDate = "0"+szDate;

text.value=szYear+'-'+szMonth+'-'+szDate;

calendar.style.display='none'

}

function hideCal(){

calendar.style.visibility = 'hidden';

}

function show_calendar()

{

calendar.style.visibility='hidden'

//calendar.style.visibility='display'

}

function show_cal(get_time)

{

if(event.clientX+163> document.body.clientWidth)

calendar.style.left=event.clientX+document.body.scrollLeft-150;

else calendar.style.left=event.clientX+document.body.scrollLeft;

if(event.clientY+200 > document.body.clientHeight)

calendar.style.top=event.clientY+document.body.scrollTop-200;

else calendar.style.top=event.clientY+document.body.scrollTop;

//calendar.style.left=event.clientX;

//calendar.style.top=event.clientY;

calendar.style.visibility='visible';

MM_showHideLayers('calendar','','show')

calendar.style.display='list-item';

text=get_time;

flag=1;

return false;

}

//document.onclick = hideCal;

function MM_findObj(n, d) { //v4.0

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && document.getElementById) x=document.getElementById(n); return x;

}

function MM_showHideLayers() { //v3.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

obj.visibility=v; }

}

function hide_cal()

{

if (flag==1)

{

flag=0;

if(!calendar.focus())

calendar.style.display='none'

}

return false;

}

程序调用页面代码:

<html>

<head>

....................

</head>

<DIV id=calendar onmouseover=keepCal()

style="DISPLAY: none; Z-INDEX: 1; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: visible; WIDTH: 150px; POSITION: absolute; TOP: 100px; HEIGHT: 225px"

name="calendar">

<SCRIPT language=javascript>getCal(0);</SCRIPT>

</DIV>

<body>

.............................................................

至 <input onclick=show_cal(this) readOnly size=12 name=enddate>

.........................................

</body>

</html>