关于万年历的实现

我现在想做个万年历，然后在某一天上面显示我想要显示的东西，求大神指导JS

解决方案 »

  1.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    td[colspan]{
    text-align:center;
    height:auto;
    }
    table{
    border-collapse:collapse;
    border-style:solid;
    }
    th{
    width:50px;
    background-color:#0FF;
    }
    td{
    border-style:solid;
    height:50px;
    vertical-align:top;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var year=document.getElementById("year");
    for(var i=2000;i<=2100;i++){
    var option=document.createElement("option");
    option.value=i;
    option.innerHTML=i+"年";
    year.appendChild(option);
    if(i==2013){
    option.selected=true;
    }
    }
    var month=document.getElementById("month");
    for(var i=1;i<=12;i++){
    var option=document.createElement("option");
    option.value=i;
    if(i<10){
    option.innerHTML='0'+i+"月";
    }else{
    option.innerHTML=i+"月";
    }
    month.appendChild(option);
    }
    var table=document.getElementById("test");
    for(var i=1;i<=6;i++){
    var tr=document.createElement("tr");
    for(var j=1;j<=7;j++){
    var td=document.createElement("td");
    td.setAttribute("num",j);
    tr.appendChild(td);
    }
    table.appendChild(tr);
    }
    year.onchange=showDate;
    month.onchange=showDate;
    }
    function showDate(){
    var md1=[31,28,31,30,31,30,31,31,30,31,30,31];
    var md2=[31,29,31,30,31,30,31,31,30,31,30,31]
    var month=document.getElementById("month").value;
    var year=document.getElementById("year").value;
    var date=new Date(year,month-1,1);
    var tbody=document.getElementById("test");
    var tds=tbody.getElementsByTagName("td");
    for(var i=1;i<tds.length;i++){
    tds[i].innerHTML="";
    tds[i].style.backgroundColor="#CCC";
    }
    var day=date.getDay();
    var now="";
    var leap=isLeap(year);
    if(leap){
    now=md2;
    }else{
    now=md1;
    }
    day=day%7+1;
    for(var i=1;i<day;i++){
    var t=(month-2)>-1?(month-2):11;
    if(month<1){
    var y=year-1;
    }else{
    y=year;
    }
    tds[i].innerHTML=now[t]-(day-i)+1;
    var key=getKey(y,t,tds[i].innerHTML);
    tds[i].innerHTML+="<br/>"+getCookie(key);
    addEvent(tds[i],key);
    }
    for(var i=0;i<now[month-1];i++){
    tds[day].innerHTML=i+1;
    var key=getKey(year,month-1,tds[day].innerHTML);
    tds[day].innerHTML+="<br/>"+getCookie(key);
    tds[day].style.backgroundColor="white";
    var t=tds[day].getAttribute("num");
    if(t==1||t==7){
    tds[day].style.backgroundColor='red';
    }
    addEvent(tds[day],key);
    day++;
    }
    for(var i=day;i<tds.length;i++){
    tds[i].innerHTML=i+1-day;
    var key=getKey(year,month,tds[i].innerHTML);
    tds[i].innerHTML+="<br/>"+getCookie(key);
    addEvent(tds[i],key);
    }
    }
    function isLeap(year){
    if(year%100!=0){
    if(year%4==0){
    return true;
    }
    }else{
    if(year%400==0){
    return true;
    }
    }
    return false;
    }
    function setCookie(key,value){
    document.cookie=key+"="+value+";max-age="+1000*60*60*24+";";
    }
    function getCookie(key){
    var cookie=document.cookie;
    var begin=cookie.indexOf(key+"=");
    if(begin!=-1){
    var end=cookie.indexOf(";",begin);
    if(end==-1){
    end=cookie.length;
    }
    var context=cookie.substring(begin+(key+"").length+1,end);
    return context;
    }
    return "";
    }
    function getKey(year,month,day){
    var d=new Date(year,month,day);
    return d.getTime();
    }
    function addEvent(dom,key){
    if(dom.addEventListener){
    dom.addEventListener('dblclick',function(){var con=prompt("请输入事宜");if(con!=null){setCookie(key,con);dom.innerHTML+=con;}},false);
    }else{
    dom.attachEvent("ondblclick",function(){var con=prompt("请输入事宜");if(con!=null){setCookie(key,con);dom.innerHTML+=con;}});
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <table>
    <tbody id="test">
    <tr>
         <td colspan="7">
             <select id="year"></select>
                <select id="month"></select>
            </td>
        </tr>
    <tr>
    <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>
    </tbody>
    </table>
    </body>
    </html>
      

  2.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    td[colspan]{
    text-align:center;
    height:auto;
    }
    table{
    border-collapse:collapse;
    border-style:solid;
    }
    th{
    width:50px;
    background-color:#0FF;
    }
    td{
    border-style:solid;
    height:50px;
    vertical-align:top;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var year=document.getElementById("year");
    for(var i=2000;i<=2100;i++){
    var option=document.createElement("option");
    option.value=i;
    option.innerHTML=i+"年";
    year.appendChild(option);
    if(i==2013){
    option.selected=true;
    }
    }
    var month=document.getElementById("month");
    for(var i=1;i<=12;i++){
    var option=document.createElement("option");
    option.value=i;
    if(i<10){
    option.innerHTML='0'+i+"月";
    }else{
    option.innerHTML=i+"月";
    }
    month.appendChild(option);
    }
    var table=document.getElementById("test");
    for(var i=1;i<=6;i++){
    var tr=document.createElement("tr");
    for(var j=1;j<=7;j++){
    var td=document.createElement("td");
    td.setAttribute("num",j);
    td.ondblclick=clickEvent;
    tr.appendChild(td);
    }
    table.appendChild(tr);
    }
    year.onchange=showDate;
    month.onchange=showDate;
    }
    function showDate(){
    var md1=[31,28,31,30,31,30,31,31,30,31,30,31];
    var md2=[31,29,31,30,31,30,31,31,30,31,30,31]
    var month=document.getElementById("month").value;
    var year=document.getElementById("year").value;
    var date=new Date(year,month-1,1);
    var tbody=document.getElementById("test");
    var tds=tbody.getElementsByTagName("td");
    for(var i=1;i<tds.length;i++){
    tds[i].innerHTML="";
    tds[i].style.backgroundColor="#CCC";
    }
    var day=date.getDay();
    var now="";
    var leap=isLeap(year);
    if(leap){
    now=md2;
    }else{
    now=md1;
    }
    day=day%7+1;
    for(var i=1;i<day;i++){
    var t=(month-2)>-1?(month-2):11;
    if(t==11){
    var y=year-1;
    }else{
    y=year;
    }
    tds[i].innerHTML=now[t]-(day-i)+1;
    var key=getKey(y,t,tds[i].innerHTML);
    tds[i].innerHTML+="<br/>"+getCookie(key);
    //addEvent(tds[i],key);
    tds[i].setAttribute("key",key);
    }
    for(var i=0;i<now[month-1];i++){
    tds[day].innerHTML=i+1;
    var key=getKey(year,month-1,tds[day].innerHTML);
    tds[day].innerHTML+="<br/>"+getCookie(key);
    tds[day].style.backgroundColor="white";
    var t=tds[day].getAttribute("num");
    if(t==1||t==7){
    tds[day].style.backgroundColor='red';
    }
    //addEvent(tds[day],key);
    tds[day].setAttribute("key",key);
    day++;
    }
    for(var i=day;i<tds.length;i++){
    tds[i].innerHTML=i+1-day;
    var key=getKey(year,month,tds[i].innerHTML);
    tds[i].innerHTML+="<br/>"+getCookie(key);
    //addEvent(tds[i],key);
    tds[i].setAttribute("key",key);
    }
    }
    function isLeap(year){
    if(year%100!=0){
    if(year%4==0){
    return true;
    }
    }else{
    if(year%400==0){
    return true;
    }
    }
    return false;
    }
    function setCookie(key,value){
    document.cookie=key+"="+value+";max-age="+1000*60*60*24+";";
    }
    function getCookie(key){
    var cookie=document.cookie;
    var begin=cookie.indexOf(key+"=");
    if(begin!=-1){
    var end=cookie.indexOf(";",begin);
    if(end==-1){
    end=cookie.length;
    }
    var context=cookie.substring(begin+(key+"").length+1,end);
    return context;
    }
    return "";
    }
    function getKey(year,month,day){
    var d=new Date(year,month,day);
    return d.getTime();
    }
    function addEvent(dom,key){
    if(dom.addEventListener){
    dom.addEventListener('dblclick',function(){var con=prompt(dom.innerHTML);if(con!=null){setCookie(key,con);dom.innerHTML+=con;}},false);
    }else{
    dom.attachEvent("ondblclick",function(){var con=prompt(dom.innerHTML);if(con!=null){setCookie(key,con);dom.innerHTML+=con;}});
    }
    }
    function clickEvent(){
    var key=this.getAttribute("key");
    var con=prompt(this.innerHTML);
    if(con!=null){
    setCookie(key,con);
    this.innerHTML+=con;
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <table>
    <tbody id="test">
    <tr>
         <td colspan="7">
             <select id="year"></select>
                <select id="month"></select>
            </td>
        </tr>
    <tr>
    <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>
    </tbody>
    </table>
    </body>
    </html>
    上个有错误