一个日历的小程序返回值的问题
这是一个日历的小程序现在想给他加几个功能 没有头绪 各位帮帮忙
首先想 选中某一天 然后返回一个这一天的只 格式是年/月/日 这个值我想传到另外一个页面
第二个是这个日历每天日期下边都有个小备注 这个值是需要跟日期想对应的
各位帮帮忙啊~~~~~
下边是代码
程序代码:
<!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>