<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> |