现在想给他加几个功能 没有头绪 各位帮帮忙
首先想 选中某一天 然后返回一个这一天的只 格式是年/月/日 这个值我想传到另外一个页面
第二个是这个日历每天日期下边都有个小备注 这个值是需要跟日期想对应的
各位帮帮忙啊~~~~~
下边是代码
程序代码：<!doctype html>
<html>
<head>
<meta charset="GB2312">
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
body{
font-family: arial;
font-size: 12px;
text-align: center;
margin: 0;
}
li{ list-style:none;}
.yanse{ background:#ffbb00;}
#b td{ border:1px solid #d5e7fd; width:60px; height:50px;}
#t td{ border:1px solid #d5e7fd; padding:0px; }
.k{width:60px; height:50px; line-height:50px; text-align:center; margin:0px; padding:0px;}
.s{width:20px; height:20px; background:#C00; line-height:20px; color:#FFF;}
.bz{width:60px; height:0px; line-height:80px; color:#999999; }
</style>
<script>
window.onload=function()
{
var oCal=document.getElementById("calendar");
var oUl=oCal.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var changeYear = oCal.getElementsByTagName("select")[0];
var changeMonth = oCal.getElementsByTagName("select")[1];
var oNow=new Date();
var nowYear=oNow.getFullYear();
var nowMonth=oNow.getMonth();
var nowDate=oNow.getDate();
var nowDay=oNow.getDay();
var nowTime=oNow.getTime();
var tMonth=nowMonth;
var tYear = nowYear;
function createCalendar(tYear,tMonth)
{
var oDate=new Date();
oDate.setYear(tYear);
oDate.setMonth(tMonth);
oDate.setDate(1);
var iYear=oDate.getFullYear();
var iMonth=oDate.getMonth();
var iDay=oDate.getDay();
for(var i=0;i<aLi.length;i++)
{
aLi[i].innerHTML="";
aLi[i].style.height="40px";
aLi[i].className="";
}
var iSum=0;
var bLeap=false;
if(iYear%4==0 && iYear%100!==0 || iYear%400==0) bLeap=true;
switch(iMonth+1)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
iSum=31;
break;
case 4:
case 6:
case 9:
case 11:
iSum=30;
break;
case 2:
if(bLeap) iSum=29;
else iSum=28;
break;
}
for(var i=1;i<=iSum;i++)
{
aLi[iDay].innerHTML=i;
iDay++;
}
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].innerHTML==nowDate && iYear==nowYear && iMonth==nowMonth)
{
aLi[i].className="active";
}
else if((aLi[i].innerHTML<nowDate && iMonth==nowMonth && iYear==nowYear) ||
iMonth<nowMonth && iYear==nowYear ||
iYear<nowYear)
{
aLi[i].className="grey";
}
}
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].innerHTML=="")
{
aLi[i].style.height="0px";
}
}
}
createCalendar(tYear,tMonth);
changeMonth.onchange = function(){
tYear = changeYear.value;
tMonth = changeMonth.value;
createCalendar(tYear,tMonth);
}
changeYear.onchange = function(){
tYear = changeYear.value;
tMonth = changeMonth.value;
createCalendar(tYear,tMonth);
}
$(document).ready(function(e) {
var d=$('#b div');
d.click(function(e) {
d.removeClass('yanse');
$(this).addClass('yanse');
return false;
});
});
};
</script>
</head>
<body id="calendar">
<table width="442" border="0" style="border-collapse:collapse;border:1px solid #d5e7fd; background:#ebf5fe;" >
<tr>
<td width="78">
<select>
<option value="2013">2013年</option>
<option value="2012">2012年</option>
<option value="2011">2011年</option>
</select> </td>
<td width="61">
<select>
<option value="0">1月</option>
<option value="1">2月</option>
<option value="2">3月</option>
<option value="3">4月</option>
<option value="4">5月</option>
<option value="5">6月</option>
<option value="6">7月</option>
<option value="7">8月</option>
<option value="8">9月</option>
<option value="9">10月</option>
<option value="10">11月</option>
<option value="11">12月</option>
</select> </td>
<td width="96" align="left">年累计:</td>
<td width="100" align="left" valign="middle">月累计：</td>
</tr>
</table>
<table width="442" border="1" style="border-collapse:collapse;border:1px solid #d5e7fd; margin-top:-1px " id="t">
<tr align="center">
<ol>
<td><li>日</li></td>
<td><li>一</li></td>
<td><li>二</li></td>
<td><li>三</li></td>
<td><li>四</li></td>
<td><li>五</li></td>
<td><li>六</li></td>
</ol>
</tr>
</table>
<ul>
<table width="345" height="300" border="1" id="b" style="border-collapse:collapse; border:1px solid #09F; margin-left:-40px; margin-top:-13px ">
<tr>
<td width="60" height="50"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="60"><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><div class="bz">1.14m³</div><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td height="104"><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
</table>
</ul>
</body>
</html>
<html>
<head>
<meta charset="GB2312">
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
body{
font-family: arial;
font-size: 12px;
text-align: center;
margin: 0;
}
li{ list-style:none;}
.yanse{ background:#ffbb00;}
#b td{ border:1px solid #d5e7fd; width:60px; height:50px;}
#t td{ border:1px solid #d5e7fd; padding:0px; }
.k{width:60px; height:50px; line-height:50px; text-align:center; margin:0px; padding:0px;}
.s{width:20px; height:20px; background:#C00; line-height:20px; color:#FFF;}
.bz{width:60px; height:0px; line-height:80px; color:#999999; }
</style>
<script>
window.onload=function()
{
var oCal=document.getElementById("calendar");
var oUl=oCal.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var changeYear = oCal.getElementsByTagName("select")[0];
var changeMonth = oCal.getElementsByTagName("select")[1];
var oNow=new Date();
var nowYear=oNow.getFullYear();
var nowMonth=oNow.getMonth();
var nowDate=oNow.getDate();
var nowDay=oNow.getDay();
var nowTime=oNow.getTime();
var tMonth=nowMonth;
var tYear = nowYear;
function createCalendar(tYear,tMonth)
{
var oDate=new Date();
oDate.setYear(tYear);
oDate.setMonth(tMonth);
oDate.setDate(1);
var iYear=oDate.getFullYear();
var iMonth=oDate.getMonth();
var iDay=oDate.getDay();
for(var i=0;i<aLi.length;i++)
{
aLi[i].innerHTML="";
aLi[i].style.height="40px";
aLi[i].className="";
}
var iSum=0;
var bLeap=false;
if(iYear%4==0 && iYear%100!==0 || iYear%400==0) bLeap=true;
switch(iMonth+1)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
iSum=31;
break;
case 4:
case 6:
case 9:
case 11:
iSum=30;
break;
case 2:
if(bLeap) iSum=29;
else iSum=28;
break;
}
for(var i=1;i<=iSum;i++)
{
aLi[iDay].innerHTML=i;
iDay++;
}
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].innerHTML==nowDate && iYear==nowYear && iMonth==nowMonth)
{
aLi[i].className="active";
}
else if((aLi[i].innerHTML<nowDate && iMonth==nowMonth && iYear==nowYear) ||
iMonth<nowMonth && iYear==nowYear ||
iYear<nowYear)
{
aLi[i].className="grey";
}
}
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].innerHTML=="")
{
aLi[i].style.height="0px";
}
}
}
createCalendar(tYear,tMonth);
changeMonth.onchange = function(){
tYear = changeYear.value;
tMonth = changeMonth.value;
createCalendar(tYear,tMonth);
}
changeYear.onchange = function(){
tYear = changeYear.value;
tMonth = changeMonth.value;
createCalendar(tYear,tMonth);
}
$(document).ready(function(e) {
var d=$('#b div');
d.click(function(e) {
d.removeClass('yanse');
$(this).addClass('yanse');
return false;
});
});
};
</script>
</head>
<body id="calendar">
<table width="442" border="0" style="border-collapse:collapse;border:1px solid #d5e7fd; background:#ebf5fe;" >
<tr>
<td width="78">
<select>
<option value="2013">2013年</option>
<option value="2012">2012年</option>
<option value="2011">2011年</option>
</select> </td>
<td width="61">
<select>
<option value="0">1月</option>
<option value="1">2月</option>
<option value="2">3月</option>
<option value="3">4月</option>
<option value="4">5月</option>
<option value="5">6月</option>
<option value="6">7月</option>
<option value="7">8月</option>
<option value="8">9月</option>
<option value="9">10月</option>
<option value="10">11月</option>
<option value="11">12月</option>
</select> </td>
<td width="96" align="left">年累计:</td>
<td width="100" align="left" valign="middle">月累计：</td>
</tr>
</table>
<table width="442" border="1" style="border-collapse:collapse;border:1px solid #d5e7fd; margin-top:-1px " id="t">
<tr align="center">
<ol>
<td><li>日</li></td>
<td><li>一</li></td>
<td><li>二</li></td>
<td><li>三</li></td>
<td><li>四</li></td>
<td><li>五</li></td>
<td><li>六</li></td>
</ol>
</tr>
</table>
<ul>
<table width="345" height="300" border="1" id="b" style="border-collapse:collapse; border:1px solid #09F; margin-left:-40px; margin-top:-13px ">
<tr>
<td width="60" height="50"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="43"><div class="k"><li></li></div></td>
<td width="60"><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><div class="bz">1.14m³</div><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
<tr>
<td height="104"><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
<td><div class="k"><li></li></div></td>
</tr>
</table>
</ul>
</body>
</html>