http://lucky.myrice.com/javascriptexam/index.html

解决方案 »

  1.   

    http://xml.sz.luohuedu.net/xml/CoolMenu/main.htm
      

  2.   

    <script language="javascript">
    var today=new Date();  //define a Date object to get current time
    var desTxtId;          //the very input type=text element to get date
    var cal;               //the calendar interface 
    var tbl;
    //var browserName=navigator.appName;
    //var isIE=browserName.indexOf("Microsoft")!=-1?true:false;

    function montharr(m0,m1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11)  //define an object includes month days 
    {
    this[0]=m0;this[1]=m1;this[2]=m2;this[3]=m3;this[4]=m4;this[5]=m5;this[6]=m6;
    this[7]=m7;this[8]=m8;this[9]=m9;this[10]=m10;this[11]=m11; }

    function fillcalendar()  // 'fill' data into the calendar
    {
    var monthDays=new montharr(31,28,31,30,31,30,31,31,30,31,30,31);
    var monthNames=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
    year=today.getYear();
    if(year<=100){year+=1900;today.setYear(year);}
    if(((year%4==0)&&(year%100==0))||(year%400==0))monthDays[1]=29;
    nDays=monthDays[today.getMonth()];
    firstDay=today;
    firstDay.setDate(1);
    startDay=firstDay.getDay();
    column=0;
    tbl.rows(1).cells(2).innerText=year+"年"+monthNames[today.getMonth()]
    for(var i=0;i<startDay;i++){tbl.rows(3).cells(i).innerText=" ";column++;}
    j=3;
    var txt="";
    for(var i=1;i<=nDays;i++)
    {
    if(column==0)
    tbl.rows(j).cells(column).innerHTML="<a href='javascript:void(null)' onclick='returndate("+i+")'><font color='red'>"+i+"</font></a>";
    else if(column==6)
    tbl.rows(j).cells(column).innerHTML="<a href='javascript:void(null)' onclick='returndate("+i+")'><font color='#66aa66'>"+i+"</font></a>";
    else tbl.rows(j).cells(column).innerHTML="<a href='javascript:void(null)' onclick='returndate("+i+")'>"+i+"</a>";
    column++;
    if(column==7){j=j+1;column=0;}
    }
    if(column<7&&column!=0)
    for(var i=column;i<7;i++)tbl.rows(j).cells(i).innerText=" ";
    }

    function monthadd()    
    {
    clearCalendar();
    today.setMonth((today.getMonth()+1)%12);
    if(today.getMonth()==0)today.setYear(today.getYear()+1);
    fillcalendar();
    }

    function monthsub()
    {
    clearCalendar();
    today.setMonth((today.getMonth()+11)%12);
    if(today.getMonth()==11)today.setYear(today.getYear()-1);
    fillcalendar();
    }

    function changeyear(yearValue)
    {
    today.setYear(yearValue);
    clearCalendar();
    fillcalendar();
    }

    function returndate(vday)
    {
    if(vday!="")
    { month=today.getMonth()+1;
    month=today.getMonth()+1;
    year=today.getYear();
    if(year<2000)year+=1900;
    desTxtId.value=year+"-"+month+"-"+vday; }
    else desTxtId.value=""
    hidecal();
    }

    function clearCalendar()
    {
    for(var i=3;i<tbl.rows.length;i++)
    for(var j=0;j<tbl.rows(3).cells.length;j++)
    tbl.rows(i).cells(j).innerHTML="";
    }

    function buildtbl()
    {
    document.write("<div id='Calendar' style=\"display:none;position:absolute;background:#FFDBBA;z-index:100\">");
    document.write("<table id='calTbl' width='220' align='center' border='1' bordercolorlight='#000000' bordercolordark='#FFFFFF'>");
    document.write("<tr>");
    document.write("<td Author='rodger' align='center' colspan='5' valign='middle'>请选择年份:");
    document.write("<select Author='rodger' size='1' onchange='changeyear(this.value)'>");
    for(var i=2000;i<2010;i++)document.write("<option Author='rodger' value='"+i+"'>"+i+"</option>");
    document.write("</select></td>") 
    document.write("<td Author='rodger' align='center'><a href='javascript:void(null)' onclick='returndate(\"\")'><font face='Webdings' color='red'>=</font></a></td>"); 
    document.write("<td Author='rodger' align='center'><a href='javascript:void(null)' onclick='hidecal()'><font face='Webdings' color='red'>r</font></a></td>");
    document.write("</tr><tr>");
    document.write("<th Author='rodger' align='center'><a Author='rodger' href='javascript:void(null)' onclick='changeyear(today.getYear()-1)'><font Author='rodger' face='Webdings'>年←</font></a></th>");
    document.write("<th Author='rodger' align='center'><a Author='rodger' href='javascript:void(null)'onclick='monthsub()'><font Author='rodger' face='Webdings'>月←</font></a></th>");
    document.write("<th Author='rodger' colspan='3' align='center' style='font-size:9pt;color:blue'>&nbsp;</th>");
    document.write("<th Author='rodger' align='center'><a href='javascript:void(null)' onclick='monthadd()'><font Author='rodger' face='Webdings'>年→</font></a></th>");
    document.write("<th Author='rodger' align='center'><a href='javascript:void(null)' onclick='changeyear(today.getYear()+1)'><font Author='rodger' face='Webdings'>月→</font></a></th>");
    document.write("</tr><tr>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:red' bgcolor='#66aa77'>日</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:white' bgcolor='#66aa77'>一</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:white' bgcolor='#66aa77'>二</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:white' bgcolor='#66aa77'>三</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:white' bgcolor='#66aa77'>四</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:white' bgcolor='#66aa77'>五</th>");
    document.write("<th Author='rodger' align='center' style='font-size:9pt;color:green' bgcolor='#66aa77'>六</th>");
    document.write("</tr>");
    for(var i=0;i<6;i++)
    {
    document.write("<tr>");
    for(var j=0;j<7;j++)document.write("<td Author='rodger' align='center' width='14%' style='font-weight:bold'></td>");
    document.write("</tr>");
    }
    document.write("</table>");
    document.write("</div> ");
    cal=document.getElementById("Calendar");
    tbl=document.getElementById("calTbl");
    fillcalendar();
    hidecal();
    }

    function hidecal(){ cal.style.display="none"; }

    function showcal()

    cal.style.display="";
    desTxtId=window.event.srcElement;
    vtop=offsetTop(desTxtId);
    vheight=desTxtId.offsetHeight;
    vwidth=desTxtId.offsetWidth;
    vleft=offsetLeft(desTxtId)+vwidth+4;
    if(vtop+cal.offsetHeight>document.body.scrollTop+document.body.clientHeight)
    vtop=vtop+vheight-cal.offsetHeight;
    if(vleft+cal.offsetWidth>document.body.scrollLeft+document.body.clientWidth)
    vleft=offsetLeft(desTxtId)-cal.offsetWidth;
    cal.style.top=vtop;
    cal.style.left=vleft;
    }
    function offsetLeft(obj)
    {   
    x = obj.offsetLeft;
    for (objParent =obj.offsetParent;objParent;objParent=objParent.offsetParent)x+=objParent.offsetLeft;
    return x;
    }
    function offsetTop(obj)

    y = obj.offsetTop;
    for (objParent=obj.offsetParent;objParent;objParent=objParent.offsetParent)y+=objParent.offsetTop;
    return y;


    function document.onclick()
    {
    with(window.event.srcElement)
    {
    if(getAttribute("Author")==null && tagName!="INPUT")
    hidecal();
    }
    }
    buildtbl()
    </script>
    onClick="showcal()"