js生成日历原理

【Javascript】

下载

新闻

文章

最近工作在制作日历事件，所以特别研究了一下日历生成过程。

开始看了一下网上的日历代码，感觉太复杂难理解。于是自己研究了一下，基本原理是取得某个月的总天数与第一天是星期几，然后在42个格子内显示出来。也就是7列X6行，所以大部分程序都是用两个for循环出来。感觉有点麻烦，我是用一个for循环出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的日历</title>
<head>
<style rel="stylesheet" type="text/css">
.td_xq{
	text-align:center;
	font-size:12px;
	font-weight:bold;
}
.td_hao{
	font-size:12px;
	cursor:pointer;
	width:20px;
	height:20px;
	text-align:center;
}
</style>
</head>
<body>
<div id="scs_rl"></div>
<SCRIPT LANGUAGE="JavaScript">
function fDrawCal(y,m) {
var temp_d  = new Date(y,m-1,1);
var first_d = temp_d.getDay(); //返回本月1号是星期几
	temp_d  = new Date(y, m, 0);
var all_d   = temp_d.getDate();//返回本月共有多少天,同时避免复杂的判断润年不润年
var html,i_d;
html=y+"年"+m+"月"+d_d+"日";
html+="<table border='1' cellpadding='0' cellspacing='1' bgcolor='#ffffff'><tr>"
html+="<td class='td_xq'>日</td>";
html+="<td class='td_xq'>一</td>";
html+="<td class='td_xq'>二</td>";
html+="<td class='td_xq'>三</td>";
html+="<td class='td_xq'>四</td>";
html+="<td class='td_xq'>五</td>";
html+="<td class='td_xq'>六</td></tr>";
html+="<tr>";
for(var i=1;i<=42;i++){
	if(first_d<i&&i<=(all_d+first_d)){
		i_d=i-first_d;//显示出几号
		html+="<td class='td_hao' onclick='show(this)'";
		if (y==d_y&&m==d_m&&d_d==i_d){//日历中为当天
			html+=" style='color:red'>"+i_d+"</td>";
		}else{
			html+=">"+i_d+"</td>";
		}
	}else{
		html+="<td>&nbsp;</td>";
	}
	if(i%7==0&&i<42){
		html+="</tr><tr>";
	}
}
html+="</tr></table>";
document.getElementById("scs_rl").innerHTML=html;
}

//点击函数
function show(obj){
	var t=obj.innerHTML;
	//点击后获取时间,如果日历在月视图中不作为,如果在日视图对应跳到对应的日期,如果是在周视图视情况判断
	alert(t);
}

var d_Date = new Date();			//系统时间对象
var d_y = d_Date.getFullYear();		//完整的年份,千万不要使用getYear,firfox不支持
var d_m = d_Date.getMonth()+1;		//注意获取的月份比实现的小1
var d_d = d_Date.getDate();
fDrawCal(d_y,d_m);
</script>
<body>
</html>

当然以上只是日历的基本结构，然后我们可以在这基础上添加一些农历阴历节目之类的，至于选择年月就更简单了。如果你了解了这些原理，那么你就可以向世人宣布自己也可以做萌萌的日历插件了！