您的位置：首页 > Web前端 > JavaScript

闲来无事写的一个简单的JavaScript日历

2007-09-20 17:41 543 查看

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>

var celendarContents={
"1":"http://xxx.blog.cn/show.action?d=1",
"3":"http://xxx.blog.cn/show.action?d=1",
"15":"http://xxx.blog.cn/show.action?d=1",
"19":"http://xxx.blog.cn/show.action?d=1",
"24":"http://xxx.blog.cn/show.action?d=1",
"27":"http://xxx.blog.cn/show.action?d=1"
}

var today=new Date();
function init(){
setCelendar(today.getFullYear(),today.getMonth());
}

function nextYear(){
setCelendar(today.getFullYear()+1,today.getMonth());
today.setYear(today.getFullYear()+1);
}

function preYear(){
setCelendar(today.getFullYear()-1,today.getMonth());
today.setYear(today.getFullYear()-1);
}

function nextMonth(){
var month=today.getMonth();
var year=today.getFullYear();
month++;
if(month>11){
month=0;
year=year+1;
}
today.setYear(year);
today.setMonth(month);
setCelendar(year,month);
}

function preMonth(){
var month=today.getMonth();
var year=today.getFullYear();
month--;
if(month<0){
month=11;
year=year-1;
}
today.setYear(year);
today.setMonth(month);
setCelendar(year,month);

}

function clear(){
for(var i=0;i<42;i++){
var tdid="ctd"+i;
document.getElementById(tdid).innerHTML="";
}
}

//实际中调使用ajax获得内容日期列表
function getCelendarContents(){
return celendarContents;
}

function setCelendar(year,month){
clear();
var d=new Date();
d.setYear(year);
d.setMonth(month);
d.setDate(1);
var dow=d.getDay();
document.getElementById("c_year").innerHTML=year;
document.getElementById("c_month").innerHTML=month+1;
var i=1;
var m=month;
var contents=getCelendarContents();
while(m==month){
var tdid="ctd"+(i-1+dow);
var htmlCode=""+i;
if(contents[i]){
var url=contents[i];
htmlCode="<a href='"+url+"' target='_blank'>"+i+"</a>";
}
document.getElementById(tdid).innerHTML=htmlCode;
i++;
d.setDate(i)
m=d.getMonth();

}
}

</script>
</head>

<body onload="init();">

<table>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td id="ctd0"></td>
<td id="ctd1"></td>
<td id="ctd2"></td>
<td id="ctd3"></td>
<td id="ctd4"></td>
<td id="ctd5"></td>
<td id="ctd6"></td>
</tr>
<tr>
<td id="ctd7"></td>
<td id="ctd8"></td>
<td id="ctd9"></td>
<td id="ctd10"></td>
<td id="ctd11"></td>
<td id="ctd12"></td>
<td id="ctd13"></td>
</tr>
<tr>
<td id="ctd14"></td>
<td id="ctd15"></td>
<td id="ctd16"></td>
<td id="ctd17"></td>
<td id="ctd18"></td>
<td id="ctd19"></td>
<td id="ctd20"></td>
</tr>
<tr>
<td id="ctd21"></td>
<td id="ctd22"></td>
<td id="ctd23"></td>
<td id="ctd24"></td>
<td id="ctd25"></td>
<td id="ctd26"></td>
<td id="ctd27"></td>
</tr>
<tr>
<td id="ctd28"></td>
<td id="ctd29"></td>
<td id="ctd30"></td>
<td id="ctd31"></td>
<td id="ctd32"></td>
<td id="ctd33"></td>
<td id="ctd34"></td>
</tr>
<tr>
<td id="ctd35"></td>
<td id="ctd36"></td>
<td id="ctd37"></td>
<td id="ctd38"></td>
<td id="ctd39"></td>
<td id="ctd40"></td>
<td id="ctd41"></td>
</tr>
<tr>
<td colspan="7" align="center">
<table>
<tr>
<td><a href="javascript:preYear()"><<</a></td>
<td id="c_year"></td>
<td><a href="javascript:nextYear()">>></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="7" align="center">
<table>
<tr>
<td><a href="javascript:preMonth()"><<</a></td>
<td id="c_month"></td>
<td><a href="javascript:nextMonth()">>></a></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航