用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

年历

2015-05-25 作者: 小韦举报

[javascript]代码库

<html>
<head><title></title></head>
<body>
<table align="left">
	<tr>
		<td id="一月">
		</td>
		<td id="二月">
		</td>
		<td id="三月">
		</td>
	</tr>
	<tr>
		<td id="四月">
		</td>
		<td id="五月">
		</td>
		<td id="六月">
		</td>
	</tr>
	<tr>
		<td id="七月">
		</td>
		<td id="八月">
		</td>
		<td id="九月">
		</td>
	</tr>
	<tr>
		<td id="十月">
		</td>
		<td id="十一月">
		</td>
		<td id="十二月">
		</td>
	</tr>
     	</table>
</body>
<script language="javascript">
	
	//获取整个日历(12个月)
	function getCalendar(year){

		for(var i=0;i<12;i++){
			getMonth(year,i);
		}
	}
	//获取一个月的日历
	function getMonth(year,month){

		var date = new Date(year,month,1,0,0,0,0);	//获取当月
		var monthTable=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
		var day=["日 ","一 ","二 ","三 ","四 ","五 ","六 "];	//星期
		//获取界面元素
		var container=document.getElementById(monthTable[month]);
		container.vAlign="top";	//让每个单元格向上面靠齐
		//元素的内容-每个月的日期表格
		var table=document.createElement("table");
		//第一行是标明是几月
		var rowHeader=table.insertRow(table.rows.length);	//返回的是一行
		var cell=rowHeader.insertCell(0);	//返回的是一列
		cell.colSpan="7";
		cell.innerHTML=monthTable[month];
		cell.align="center";
		
		rowHeader=table.insertRow(table.rows.length);	//返回的是第二行
		//第二行是星期
		for(var i=0;i<7;i++){
			var cell=rowHeader.insertCell(i);
			cell.innerHTML=day[i];
		} 
		//日期的第一行
		rowHeader=table.insertRow(table.rows.length);
		for(var i=0;i<date.getDay();i++){
			var  cell=rowHeader.insertCell(i);
			
		}
		//将单元格进行填充
		for(var i=0;i<31;i++){
			if(date.getDay()==0){	//如果这个月的第一天是星期天
				rowHeader=table.insertRow(table.rows.length);
			}
			//1日的那一天所在的单元格
			var cell=rowHeader.insertCell(date.getDay()%7);
			cell.innerHTML=date.getDate();
			cell.align="center";
			date.setDate(i+2);
			if(date.getDate()==1) break;
			
		}
		
		//挂载container的孩子
		var childNode=container.firstChild;
		if(childNode!=null){
			container.removeChild(container.firstChild)
		}
		container.appendChild(table);
	}
	
	//执行函数
	getCalendar(2015);
	//可以改进添加样式使年历更加美观.
</script>
<html>

[代码运行效果截图]


年历


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...