calender.js

自己做项目时做的一个javascript的分页例子

document.writeln("<div id='calenderdiv' style>日历加载中...</div>");
var cal_url_redefine;
if(window.location.href.indexOf('archive')>=0) {cal_url_redefine = '../'} else { cal_url_redefine ='' };

function changecal(action,year,month)
{	
	var strcal;
	switch(action)
	{	
	case "nextmonth":
		if(month==11)
		{
			month = 1;
			year = year*1 + 1;
		}else{
			month = month*1 + 2;
		}
		strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out'  onclick='calender(" + year + "," + month +")' title='下一个月' style='cursor:hand;'>> </span>";
		break;

	case "premonth":
		if(month==0)
		{
			month = 12;
			year = year*1 - 1;
		}
		strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一个月' style='cursor:hand;'> <</span>";
		break;

	case "nextyear":
		year = year*1 + 1;
		month = month*1 + 1;
		strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='下一年' style='cursor:hand;'>>></span>";
		break;

	case "preyear": 
		year = year*1 - 1;
		month = month*1 + 1;
		strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一年' style='cursor:hand;'><<</span>";
		break;

	default:;
	}
	strcal = " " + strcal + " ";
	return(strcal);
}



function calender(cyear,cmonth)
{
	
	
	var d,d_date,d_day,d_month;
	//定义星期数组
	//var daylist = ["Su","Mo","Tu","We","Th","Fr","Sa"]	

	//定义月份数组
	//var monthlist = ["January","February","March","April","May","June","July","August","September","October","November","December"]	

	//定义每月天数数组
	var monthdates = ["31","28","31","30","31","30","31","31","30","31","30","31"]	

	d = new Date();
	d_year = d.getYear();	//获取年份
	if (((d_year % 4 == 0) && (d_year % 100 != 0)) || (d_year % 400 == 0)) monthdates[1] = "29";	//判断闰月，把monthdates的二月改成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();	//获取日期
	
	if(d_year<2000){d_year = d_year + 1900}	//修正19XX年只显示两位的错误

//=========================================================输出日历==================================================================
	var str;
	str = "<table cellspacing='0' cellpadding='0' id='calender'>";
	str = str + "<tr><td id='cal_title' colspan='7' >" + changecal("preyear",d_year,d_month) + changecal("premonth",d_year,d_month)  + d_year + " - " + (d_month*1+1) + changecal("nextmonth",d_year,d_month)  + changecal("nextyear",d_year,d_month)  +"</td></tr>";
	str = str + "<tr id='week'><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>";
	str = str + "<tr>";

	var firstday,lastday,totalcounts,firstspace,lastspace,monthdays;
	monthdays = monthdates[d.getMonth()];					//需要显示的月份共有几天，可以用已定义的数组来获取
	d.setDate(1);											//设定日期为月份中的第一天
	firstday = d.getDay();									//需要显示的月份的第一天是星期几
	firstspace = firstday;									//1号前面需要补足的的空单元格的数
	d.setDate(monthdays);									//设定日期为月份的最后一天
	lastday = d.getDay();									//需要显示的月份的最后一天是星期几
	lastspace = 6 - lastday;								//最后一天后面需要空单元格数
	totalcounts = firstspace*1 + monthdays*1 + lastspace*1;	//前空单元格+总天数+后空单元格，用来控制循环
		
	
	// count->大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量
	var count,flag,f_space,l_space;
	flag = 0;												//flag->前空单元格输完后令flag=1不再继续做这个小循环
	for(count=1;count<=totalcounts;count++)
	{
		//一开始flag=0，首先输出前空单元格，输完以后flag=1，以后将不再执行这个循环
		if(flag==0)
		{
			if(firstspace!=0)
			{	
				for(f_space=1;f_space<=firstspace;f_space++)
				{	
					str = str + "<td>&nbsp;</td>";
					if(f_space!= firstspace) count++;	
				}
				flag = 1;
				continue;
			}
		}		
		

		if((count-firstspace)<=monthdays)
		{
			//输出月份中的所有天数		
			curday = d_year+","+(d_month*1+1)+","+(count - firstspace)+"|"
			linkday = d_year+","+(d_month*1+1)+","+(count - firstspace)
			var today = new Date();
			if( (d_year == today.getYear()) && (d_month == today.getMonth()) && ((count-firstspace) == today.getDate()) )
			{
				if(calstr.indexOf(curday)>=0){
					str = str + "<td><span class='current havelog'><a href='"+cal_url_redefine+"logcalurl.asp?log_date="+linkday+"'>" + (count - firstspace) + "</a></span></td>";	//将本地系统中的当前天数高亮
				}else{
					str = str + "<td><span class='current'>" + (count - firstspace) + "</span></td>";	//将本地系统中的当前天数高亮
				}
			}else{
				if(calstr.indexOf(curday)>=0){
					str = str + "<td><span class='havelog notcurrent'><a href='"+cal_url_redefine+"logcalurl.asp?log_date="+linkday+"'>" + (count - firstspace) + "</a></span></td>";	//不用高亮的部分,有日志
				}else{
					str = str + "<td>" + (count - firstspace) + "</td>";	//不用高亮的部分,没有日志
				}
			}
			
			if(count%7==0)
			{
				if(count<totalcounts)
				{
					str = str + "</tr><tr>";
				}else{
					str = str + "</tr>";
				}
			}
		}else{

			//如果已经输出了月份中的最后一天，就开始输出后空单元格补足
			for(l_space=1;l_space<=lastspace;l_space++)
			{
				str = str + "<td>&nbsp;</td>";
				if(l_space!= lastspace) count++;	
			}
			continue;
		}
	}

	str = str + "</table>"
	document.getElementById("calenderdiv").innerHTML = "<div id='calenderdiv'>" + str + "</div>";
}
calender("","")