网页显示日历的初步实现

刚学Prototype框架,想自己写个日历控件来练习一下Prototype,整理了一下思路后,初步实现了一些代码。希望大家给点意见。
(运行要引进Prototype 1.5.1.2.js)
<script type="text/javascript" src="Prototype 1.5.1.2.js"></script>
<body>
<table id="date" cellpadding="0" cellspacing="0" border="1px">
	<tr id="week">
    	<td>星期日</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    	<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>
<script type="text/javascript">
/**
返回每个月的最大天数
*/
function getMonthDay(month){

	if(month == 0)month=12;
	if(month == 13)month=1;
	
	var year = new Date();
	
	var $31 = [1,3,5,7,8,10,12];//31天的月份
	
	if(month == 2){// 闰年|平年的2月份处理(印象中初中数学书上好象是这样的,也不知道对错)
		if(year.getYear()%4 == 0){
			return 29;
		}
		return 28;
	}
	
	for(var i=0;i<$31.length;i++){
		if(month == $31[i]){
			return 31;
		}
	}
	
	return 30;
}


var week = $("week");//标题行
var weekDate = new Date();

var week_day = week.down(weekDate.getDay());//今天星期几
	week_day.setStyle({backgroundColor:"#33FFFF"});//把对应的星期背景渲染

var this_monthDay = getMonthDay(weekDate.getMonth()+1);//当前月份的天数。

/*计算每月的一号是星期几,
想在网上这个公式,但找到的都是长篇大论,看了心烦。
所以自己找了一下规律,写了个公式,测试了一下感觉还挺准的,
有希望有更好建议的人不要吝啬,能提供一下比较可靠的实现。
*/
var first_Day = weekDate.getDay() + (Math.abs(weekDate.getDate() % 7 - 7) + 1);//计算每月的一号是星期几
if(first_Day > 7)first_Day = first_Day - 7;
if(first_Day == 7)first_Day = 0;


var n = 1;
come_Back:
while((week = week.next()) != undefined){
	for(var j = 0;j < 7;j ++){
		if(n == 1 && j < first_Day){
			
		}else if(n == 1 && j == first_Day){
			week.down(j).update(n+"号");
			n ++;
		}else{
			if(n == weekDate.getDate()){
				week.down(j).setStyle({backgroundColor:"#33FFFF"});//渲染当天的背景
			}
			week.down(j).update(n+"号");
			n ++;
		}
		
		if(n > this_monthDay)
			break come_Back;//大于每月的最大天数,就直接返回
	}
}
</script>
</body>

你可能感兴趣的:(框架,prototype,J#)