简易年历

清明放假，闲着无事，就想着写写代码，所以写了小东西，希望需要的朋友喜欢。

?

?日历代码：

?

/**
 * 日志插件;
 */

var d_year	=	date('Y');	//全局年
var d_month	=	date('m');	//全局月
var d_day	=	date('d');	//全局日
var is_old	=	null;		//更换时，新的日期;

/**
 * 初始化日历，并输出;
 */
function init() {
	var str = "<table id='calendar' cellspacing='0'>";
	str += 	header();	//头部输出;
	str += 	tops();		//顶部星期输出;;
	var ls	=	list(d_year,d_month,1);
	str	+=	"<tbody id='calendar_tbody'>"+ls['str']+"</tbody>";
	str += "</table>";
	document.write(str);
}


function ani(){
	var arr=['猴','鸡','狗','猪','鼠','牛','虎','兔','龙','蛇','马','羊'];
	var yyyy	=	date('Y');
	return /^\d{4}$/.test(yyyy)?arr[yyyy%12]:null;
}

/**
 * 输出星期;
 * @returns {String}
 */
function tops() {
	var str = "<tr class='week'>";
	var arr = [ '日', '一', '二', '三', '四', '五', '六' ];
	for ( var i in arr) {
		str += "<td>" + arr[i] + "</td>";
	}
	str += "</tr></thead>";
	return str;
}

/**
 * 更换年月时，刷新数据；
 * @param ms	数据;
 * @param t		标量  y:d_year  m:d_month   d:d_day
 */
function change_(ms,t){
	if(t=='y'){
		d_year	=	ms;
	}else if(t=='m'){
		d_month	=	ms;
	}else{
		d_day	=	ms;
	}
	var cal		=	document.getElementById('calendar');
	var node	=	cal.getElementsByTagName("tbody")[0];
	cal.removeChild(node);	//清除tbody中的数据;
	
	var str		=	list(d_year,d_month,1);		//更换的日期;
	var node	=	document.createElement("tbody");
	
	try{
		node.setAttribute("id", "calendar_tbody");
		cal.appendChild(node);
		var tbody	=	document.getElementById('calendar_tbody');
		tbody.innerHTML	=	str['str'];	//赋值;
	}catch(e){		//兼容IE，Opera  不支持table中不支持innerHTML;
		 var arr	=	str['rows'];
		 for(var i in arr){
			 var tr		=	document.createElement("tr");	
			 for(var x in arr[i]){
				 var td 	=	document.createElement("td");
				 var txt	=	document.createTextNode(arr[i][x]);
				 td.appendChild(txt);
				 if(d_day==arr[i][x]){
					td.setAttribute("class", "current");
				 }
				 tr.appendChild(td);
			 }
			 node.appendChild(tr);
		 }
		 node.setAttribute("id", "calendar_tbody");
		 cal.appendChild(node);
	}
	//改变生肖;
	var y	=	document.getElementById('ani');
	y.innerHTML	=	ani();
}


/**
 * 顶部，输出;   年 月的刷选;
 * @returns {String}
 */
function header(){
	var str = "<thead><tr><td colspan=7 style='text-align:center' class='top'>";
	str	+=	'<select onchange="change_(this.value,\'y\')">';
	for(var i=2100;i>=1970;i--){
		if(i==d_year){
			str	+=	"<option value='"+i+"' selected>"+i+"</option>";
		}else{
			str	+=	"<option value='"+i+"'>"+i+"</option>";
		}
	}
	str	+=	"</select>&nbsp;&nbsp;<span id='ani'>"+ani()+"</span>年";
	str	+=	'&nbsp;&nbsp;<select onchange="change_(this.value,\'m\')">';
	for(var i=1;i<=12;i++){
		if(i==d_month){
			str	+=	"<option value='"+i+"' selected>"+i+"</option>";
		}else{
			str	+=	"<option value='"+i+"'>"+i+"</option>";
		}
	}
	str	+=	"</select>&nbsp;月";
	str += "</td></tr>";
	return str;
}

/**
 * 输出日期的具体排布;
 * @param year
 * @param mon
 * @param day
 * @returns {String}
 */
function list(year,mon,day) {
	var rows	=	[];
	var str = "<tr>";
	is_old	=	new Date(year,mon-1,day);
	var d	=	is_old.getDay();	//有更换则是
	var line	=	1;	//计算行数;
	if(d==0){
		line	=	0;	//如果开始是星期天，那么就是第0行;
	}
	
	for(i=1;i<=7;i++)   
    {   
		rows[i]=new Array(); //将每一个子元素又定义为数组   
    }  
	
	for(var y=1;y<=d;y++){			//开始的空格;
		str	+=	"<td>&nbsp;</td>";
		rows[line][y]	=	" ";
	}
	var last	=	0;
	for ( var i=1;i<=date('c');i++) {	//每月的 日数输出;
		var s	=	"";
		if(i==d_day){
			s	=	"<td class='current'>"+i+"</td>";
		}else{	s	=	"<td>"+i+"</td>"; }
		if((i+d-1)%7==0){
			line++;			//获取输出了多少行，计算最后的空格数;
			str += "</tr><tr>"+s;
			rows[line][i]	=	i;
		}else{
			str += s;
			rows[line][d+i]	=	i;
		}
		last	=	d+i;
	}
	for(var i=1;i<=(line*7-date('c')-d);i++){
		str	+=	"<td>&nbsp;</td>";
		rows[line][last+i]	=" ";
	}
	str += "</tr>";
	var ls	=	[];
	ls['str']	=	str;
	ls['rows']	=	rows;
	return ls;
}



/**
 * 获取年，月  对应的天数;
 * @param Year
 * @param Mon
 * @returns {Number}
 */
function Day(Year, Mon) {
	var start = new Date(Year, Mon - 1, 1);
	var end = new Date(Year, Mon, 1);
	var r = (end - start) / (1000 * 60 * 60 * 24);
	return r;
}
/**
 * 时间访问函数,思路来源与php的date函数的用法;
 * @param str
 * @returns {String}
 */
function date(str) {
	var arr = str.split('');
	if(is_old==""){				//日期的判断;
		var date = getCalendar('');
	}else{
		var date = getCalendar(is_old);
	}
	
	var str = "";
	for ( var i in arr) {		//遍历返回值;
		if (date[arr[i]]) {
			if ((date[arr[i]] + "").length == 1) {
				str += "0" + date[arr[i]];
			} else {
				str += date[arr[i]];
			}
		} else {
			str += arr[i];
		}
	}
	return str;
}
/**
 * 获取日历的日期; 存入数组，便于访问;
 * @param todate
 * @returns {Array}
 */
function getCalendar(todate) {
	var arr = [];
	var date 	=	new Date();
	if(todate){
		arr['d'] = todate.getDate();
	}else{
		arr['d'] = date.getDate();
	}
	if(todate){
		arr['Y'] = todate.getFullYear();
	}else{
		arr['Y'] = date.getFullYear();
	}
	
	if(todate){
		arr['m'] = todate.getMonth() + 1;
	}else{
		arr['m'] = date.getMonth() + 1;
	}
	
	if(todate){
		arr['z'] = todate.getYear();
	}else{
		arr['z'] = date.getYear() ;
	}
	
	arr['H'] = date.getHours();
	arr['i'] = date.getMinutes();
	arr['s'] = date.getSeconds();
	arr['c'] = Day(arr['Y'],arr['m']);	//每月天数;
	arr['x'] = date.getDay();		//星期几;
	return arr;
}

?

?HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日历</title>
<script type="text/javascript" src="calendar.js"></script>
<style type="text/css">
#calendar{
	width:300px;
	border:none;
	border: 1px solid #C3D9FF;
	font: '楷体', '仿宋', '微软雅黑';
}
#calendar .current{
	color:red;
}
#calendar td{
	text-align:center;
	padding:4px 2px;
}
#calendar .top{
	background: #E7EEF8;
	color: #003784;
	height:28px;
}
#calendar .week td{
	border-bottom:1px solid #DDDDDD
}
#calendar tbody td{
	font-weight: bold;
	color:#444;
}
#ani{
	color:red;	
}
</style>
</head>
<body>
<script type="text/javascript">init();</script>
</body>
</html>

?

?如果是简单显示日历功能的，是没问题。