閒來無事寫的一個簡單的JavaScript日曆
<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 οnlοad="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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章