Javascript写的一个页面日历效果

看看效果图先：

CSS代码：

*{

margin:0;

padding:0;

font:10pxtahoma;

}

#calender{

text-align:center;

width:147px;

font-size:10px;

/*color:#27B0C1;*/

margin:12px012px6px;

border-top:1pxsolid#EEEEEE;

border-left:1pxsolid#EEEEEE;

}

#calender.arrow_over{

color:#FF1493;

}

#calender.arrow_out{

color:#FF8C00;

}

#calendertd{

border-bottom:1pxsolid#EEEEEE;

border-right:1pxsolid#EEEEEE;

width:21px;

height:20px;

line-height:16px;

color:#666666;

}

#calender#cal_title{

width:147px;background:#EFEFEF;

}

#calender#weektd{

background:#F8F8F8;

}

#calender.current{

background:#AAE7E8;

display:block;

margin:2px;

}

#calender.notcurrent{

display:block;

margin:2px;

background:#EDEDED;

}

Javascript代码：

document.writeln("日历加载中...");

varpress_tag;

functionchangecal(action,year,month)

{

varstrcal;

switch(action)

{

case"nextmonth":

if(month==11)

{

month=1;

year=year*1+1;

}else{

month=month*1+2;

}

strcal="

onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='下一个月'style='cursor:hand;'>>";

break;

case"premonth":

if(month==0)

{

month=12;

year=year*1-1;

}

strcal="

onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='上一个月'style='cursor:hand;'>";

break;

case"nextyear":

year=year*1+1;

month=month*1+1;

strcal="

onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='下一年'style='cursor:hand;'>>>";

break;

case"preyear":

year=year*1-1;

month=month*1+1;

strcal="

onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='上一年'style='cursor:hand;'>";

break;

default:;

}

strcal=""+strcal+"";

return(strcal);

}

functioncalender(cyear,cmonth)

{

vard,d_date,d_day,d_month;

//定义每月天数数组

varmonthdates=["31","28","31","30","31","30","31","31","30","31","30","31"]

d=newDate();

d_year=d.getYear();//获取年份

//判断闰月，把monthdates的二月改成29

if(((d_year%4==0)&&(d_year%100!=0))||(d_year%400==0))monthdates[1]="29";

if((cyear!="")||(cmonth!=""))

{

//如果用户选择了月份和年份，则当前的时间改为用户设定

d.setYear(cyear);

d.setMonth(cmonth-1);

d.setDate(1);

}

d_month=d.getMonth();//获取当前是第几个月

d_year=d.getYear();//获取年份

d_date=d.getDate();//获取日期

//修正19XX年只显示两位的错误

if(d_year

//===========输出日历===========

varstr;

str="";

str+=""

str+=changecal("preyear",d_year,d_month)

str+=changecal("premonth",d_year,d_month)

str+=d_year+"-"+(d_month*1+1)

str+=changecal("nextmonth",d_year,d_month)

str+=changecal("nextyear",d_year,d_month)

str+="";

str+="SuMoTuWeTh

FrSa";

str+="";

varfirstday,lastday,totalcounts,firstspace,lastspace,monthdays;

//需要显示的月份共有几天，可以用已定义的数组来获取

monthdays=monthdates[d.getMonth()];

//设定日期为月份中的第一天

d.setDate(1);

//需要显示的月份的第一天是星期几

firstday=d.getDay();

//1号前面需要补足的的空单元格的数

firstspace=firstday;

//设定日期为月份的最后一天

d.setDate(monthdays);

//需要显示的月份的最后一天是星期几

lastday=d.getDay();

//最后一天后面需要空单元格数

lastspace=6-lastday;

//前空单元格+总天数+后空单元格，用来控制循环

totalcounts=firstspace*1+monthdays*1+lastspace*1;

//count：大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量

varcount,flag,f_space,l_space;

//flag：前空单元格输完后令flag=1不再继续做这个小循环

flag=0;

for(count=1;count

{

//一开始flag=0，首先输出前空单元格，输完以后flag=1，以后将不再执行这个循环

if(flag==0)

{

if(firstspace!=0)

{

for(f_space=1;f_space

{

str+="";

if(f_space!=firstspace)count++;

}

flag=1;

continue;

}

}

if((count-firstspace)

{

//输出月份中的所有天数

curday=d_year+","+(d_month*1+1)+","+(count-firstspace)+"|"

linkday=d_year+","+(d_month*1+1)+","+(count-firstspace)

vartoday=newDate();

if((d_year==today.getYear())&&(d_month==today.getMonth())&&((count-firstspace)==today.getDate()))

{

//将本地系统中的当前天数高亮

str+=""+(count-firstspace)+"";

}else{

//不用高亮的部分,没有日志

str+=""+(count-firstspace)+"";

}

if(count%7==0)

{

if(count

{

str+="";

}else{

str+="";

}

}

}else{

//如果已经输出了月份中的最后一天，就开始输出后空单元格补足

for(l_space=1;l_space

{

str+="";

if(l_space!=lastspace)count++;

}

continue;

}

}

str+="www.sugood.cn"

document.getElementById("calenderdiv").innerHTML=""+str+"";

}

//调用函数

calender("","")

//-->

有用  |  无用 取消

猜你喜欢