<html>
<head>
<title>日历控件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, p, div,td,input {font:menu;line-height: 150%}
.div { font-family: 宋体; font-size: 12px; line-height: 150% }
-->
</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
//创建一个数组,用于存放每个月的天数
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) 
{
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 calendar() {
var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
var today = new Date();
var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
year = today.getYear() +1900;
thisDay = today.getDate();
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
testMe = firstDay.getDate();
if (testMe == 2) firstDay.setDate(0);
startDay = firstDay.getDay();
document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>") 
document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")
document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>");
document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>");
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var now = new Date();
document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>");
document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>");
document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>");
document.writeln("</TR><TR>");
column = 0;
for (i=0; i<startDay; i++) {
document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>");
column++;
}for (i=1; i<=nDays; i++) {
if (i == thisDay) {
document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>")
}
else {
document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>");
}
document.writeln(i);
if (i == thisDay) document.writeln("</FONT></TD>")
column++;
if (column == 7) {
document.writeln("<TR>"); 
column = 0;
}
}
document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")
document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>")
document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")
document.writeln("</TD></TR></TABLE></div>");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var timerID = null;
var timerRunning = false;function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;}//显示当前时间
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = " " + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " 下午 " : " 上午 "
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning = true;}function startclock () {
stopclock();
showtime();}
</SCRIPT></head><body bgcolor="#FFFFFF" onLoad="startclock(); timerONE=window.setTimeout" text="#000000">
<script language="JavaScript" type="text/javascript">
<!--
calendar();
//-->
</script>
 
</body>
</html>

解决方案 »

  1.   

    这个CSDN网友贡献的http://www.gl-itc.org/temp/meizz/calendar.htm
      

  2.   

    http://www.soff.net/calendar.htm
    超酷日历!
    源码在http://sean.wox.org/ap/calendar/可以下载
      

  3.   

    内容太长分为两次回复,你只需将两次的合成一个即可:
    <!--
    document.writeln('<div id=meizzDateLayer style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
    document.writeln('<span id=tmpSelectYearLayer  style="z-index: 9999;position: absolute;top: 2; left: 18;display: none"></span>');
    document.writeln('<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span>');
    document.writeln('<table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#808080 onselectstart="return false">');
    document.writeln('  <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>');
    document.writeln('      <tr align=center><td width=20 align=center bgcolor=#8dc63f style="font-size:12px;cursor: hand;color: #FFD700" ');
    document.writeln('        onclick="meizzPrevM()" title="向前翻 月" Author=meizz><b Author=meizz>&lt;&lt;</b>');
    document.writeln('        </td><td width=100 align=center style="font-size:12px;cursor:default" Author=meizz>');
    document.writeln('        <span Author=meizz id=meizzYearHead onclick="tmpSelectYearInnerHTML(this.innerText)"></span>&nbsp;年&nbsp;<span');
    document.writeln('         id=meizzMonthHead Author=meizz onclick="tmpSelectMonthInnerHTML(this.innerText)"></span>&nbsp;月</td>');
    document.writeln('        <td width=20 bgcolor=#8dc63f align=center style="font-size:12px;cursor: hand;color: #FFD700" ');
    document.writeln('         onclick="meizzNextM()" title="往后翻 月" Author=meizz><b Author=meizz>&gt;&gt;</b></td></tr>');
    document.writeln('    </table></td></tr>');
    document.writeln('  <tr><td width=142 height=18 bgcolor=#808080>');
    document.writeln('<table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">');
    document.writeln('<tr align=center><td style="font-size:12px;color:#FFFFFF" Author=meizz>日</td>');
    document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>一</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>二</td>');
    document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>三</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>四</td>');
    document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>五</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>六</td></tr>');
    document.writeln('</table></td></tr><!-- Author:F.R.Huang(meizz) http://www.meizz.com/ mail: [email protected] 2002-10-8 -->');
    document.writeln('  <tr><td width=142 height=120>');
    document.writeln('    <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF>');
    var n=0; for (j=0;j<5;j++){ document.writeln (' <tr align=center>'); for (i=0;i<7;i++){
    document.writeln('<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" Author=meizz onclick=meizzDayClick(this.innerText)></td>');n++;}
    document.writeln('</tr>');}
    document.writeln('      <tr align=center><td width=20 height=20 style="font-size:12px" id=meizzDay35 Author=meizz ');
    document.writeln('         onclick=meizzDayClick(this.innerText)></td>');
    document.writeln('        <td width=20 height=20 style="font-size:12px" id=meizzDay36 Author=meizz onclick=meizzDayClick(this.innerText)></td>');
    document.writeln('        <td colspan=5 align=right Author=meizz><span onclick=closeLayer() style="font-size:12px;cursor: hand"');
    document.writeln('         Author=meizz title=""><u>关闭</u></span>&nbsp;</td></tr>');
    document.writeln('    </table></td></tr><tr><td>');
    document.writeln('        <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>');
    document.writeln('          <tr><td Author=meizz align=left><input Author=meizz type=button value="< " title="向前翻 年" onclick="meizzPrevY()" ');
    document.writeln('             onfocus="this.blur()" style="font-size: 12px; height: 20px"><input Author=meizz title="向前翻 月" type=button ');
    document.writeln('             value="<<" onclick="meizzPrevM()" onfocus="this.blur()" style="font-size: 12px; height: 20px"></td><td ');
    document.writeln('             Author=meizz align=center><input Author=meizz type=button value=Today onclick="meizzToday()" ');
    document.writeln('             onfocus="this.blur()" title="现在的年月" style="font-size: 12px; height: 20px"></td><td ');
    document.writeln('             Author=meizz align=right><input Author=meizz type=button value=">>" onclick="meizzNextM()" ');
    document.writeln('             onfocus="this.blur()" title="往后翻 月" style="font-size: 12px; height: 20px"><input ');
    document.writeln('             Author=meizz type=button value=" >" title="往后翻 年" onclick="meizzNextY()"');
    document.writeln('             onfocus="this.blur()" style="font-size: 12px; height: 20px"></td>');
    document.writeln('</tr></table></td></tr></table></div>');
      

  4.   

    //==================================================== WEB 页面显示部分 var outObject;
    function setday(tt,obj) //主调函数
    {
      if (arguments.length >  2){alert("对不起!传入本控件的参数太多!");return;}
      if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;}
      var dads  = document.all.meizzDateLayer.style;var th = tt;
      var ttop  = tt.offsetTop;     //TT控件的定位点高
      var thei  = tt.clientHeight;  //TT控件本身的高
      var tleft = tt.offsetLeft;    //TT控件的定位点宽
      var ttyp  = tt.type;          //TT控件的类型
      while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
      dads.top  = (ttyp=="image")? ttop+thei : ttop+thei+6;
      dads.left = tleft;
      outObject = (arguments.length == 1) ? th : obj;
      dads.display = '';
      event.returnValue=false;
    }var MonHead = new Array(12);        //定义阳历中每个月的最大天数
        MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4]  = 31; MonHead[5]  = 30;
        MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;var meizzTheYear=new Date().getFullYear(); //定义年的变量的初始值
    var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值
    var meizzWDay=new Array(37);               //定义写日期的数组function document.onclick() //任意点击时关闭该控件

      with(window.event.srcElement)
      { if (tagName != "INPUT" && getAttribute("Author")==null)
        document.all.meizzDateLayer.style.display="none";
      }
    }function meizzWriteHead(yy,mm)  //往 head 中写入当前的年与月
      { document.all.meizzYearHead.innerText  = yy;
        document.all.meizzMonthHead.innerText = mm;
      }function tmpSelectYearInnerHTML(strYear) //年份的下拉框
    {
      if (strYear.match(/\D/)!=null){alert("年份输入参数不是数字!");return;}
      var m = (strYear) ? strYear : new Date().getFullYear();
      if (m < 1000 || m > 9999) {alert("年份值不在 1000 到 9999 之间!");return;}
      var n = m - 10;
      if (n < 1000) n = 1000;
      if (n + 26 > 9999) n = 9974;
      var s = "<select Author=meizz name=tmpSelectYear style='font-size: 12px' "
         s += "onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' "
         s += "onchange='document.all.tmpSelectYearLayer.style.display=\"none\";"
         s += "meizzTheYear = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n";
      var selectInnerHTML = s;
      for (var i = n; i < n + 26; i++)
      {
        if (i == m)
           {selectInnerHTML += "<option value='" + i + "' selected>" + i + "年" + "</option>\r\n";}
        else {selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n";}
      }
      selectInnerHTML += "</select>";
      document.all.tmpSelectYearLayer.style.display="";
      document.all.tmpSelectYearLayer.innerHTML = selectInnerHTML;
      document.all.tmpSelectYear.focus();
    }function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框
    {
      if (strMonth.match(/\D/)!=null){alert("月份输入参数不是数字!");return;}
      var m = (strMonth) ? strMonth : new Date().getMonth() + 1;
      var s = "<select Author=meizz name=tmpSelectMonth style='font-size: 12px' "
         s += "onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' "
         s += "onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";"
         s += "meizzTheMonth = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n";
      var selectInnerHTML = s;
      for (var i = 1; i < 13; i++)
      {
        if (i == m)
           {selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option>\r\n";}
        else {selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option>\r\n";}
      }
      selectInnerHTML += "</select>";
      document.all.tmpSelectMonthLayer.style.display="";
      document.all.tmpSelectMonthLayer.innerHTML = selectInnerHTML;
      document.all.tmpSelectMonth.focus();
    }function closeLayer()               //这个层的关闭
      {
        document.all.meizzDateLayer.style.display="none";
      }function document.onkeydown()
      {
        if (window.event.keyCode==27)document.all.meizzDateLayer.style.display="none";
      }function IsPinYear(year)            //判断是否闰平年
      {
        if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
      }function GetMonthCount(year,month)  //闰年二月为29天
      {
        var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
      }function GetDOW(day,month,year)     //求某天的星期几
      {
        var dt=new Date(year,month-1,day).getDay()/7; return dt;
      }function meizzPrevY()  //往前翻 Year
      {
        if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}
        else{alert("年份超出范围(1000-9999)!");}
        meizzSetDay(meizzTheYear,meizzTheMonth);
      }
    function meizzNextY()  //往后翻 Year
      {
        if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;}
        else{alert("年份超出范围(1000-9999)!");}
        meizzSetDay(meizzTheYear,meizzTheMonth);
      }
    function meizzToday()  //Today Button
      {
        meizzTheYear = new Date().getFullYear();
        meizzTheMonth = new Date().getMonth()+1;
        meizzSetDay(meizzTheYear,meizzTheMonth);
      }
    function meizzPrevM()  //往前翻月份
      {
        if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}
        meizzSetDay(meizzTheYear,meizzTheMonth);
      }
    function meizzNextM()  //往后翻月份
      {
        if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}
        meizzSetDay(meizzTheYear,meizzTheMonth);
      }function meizzSetDay(yy,mm)   //主要的写程序**********
    {
      meizzWriteHead(yy,mm);
      for (var i = 0; i < 37; i++){meizzWDay[i]=""};  //将显示框的内容全部清空
      var day1 = 1,firstday = new Date(yy,mm-1,1).getDay();  //某月第一天的星期几
      for (var i = firstday; day1 < GetMonthCount(yy,mm)+1; i++){meizzWDay[i]=day1;day1++;}
      for (var i = 0; i < 37; i++)
      { var da = eval("document.all.meizzDay"+i)     //书写新的一个月的日期星期排列
        if (meizzWDay[i]!="")
          { da.innerHTML = "<b>" + meizzWDay[i] + "</b>";
            da.style.backgroundColor = (yy == new Date().getFullYear() &&
            mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#FFD700" : "#C5DDB5";
            da.style.cursor="hand"
          }
        else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"}
      }
    }
    function meizzDayClick(n)  //点击显示框选取日期,主输入函数*************
    {
      var yy = meizzTheYear;
      var mm = meizzTheMonth;
      if (mm < 10){mm = "0" + mm;}
      if (outObject)
      {
        if (!n) {outObject.value=""; return;}
        if ( n < 10){n = "0" + n;}
        outObject.value= yy + "-" + mm + "-" + n ; //注:在这里你可以输出改成你想要的格式
        closeLayer(); 
      }
      else {closeLayer(); alert("您所要输出的控件对象并不存在!");}
    }
    meizzSetDay(meizzTheYear,meizzTheMonth);
    // -->
    将上面的内容拷贝下来存为一个js文件,例如:day.js;
    在页面中引入时用(假如页面与此js文件在同一个目录下)放在<head></head>中间
    <script language=javascript src="day.js"></script>
    此小日历颜色可以在上面的文件中找到相应的色值,更改即可。
      

  5.   

    up,帮忙找找啊!那个flash的,就是上次谁说要摹仿的,很漂亮的那个flash
      

  6.   

    就在下面,找到了!http://www.ewayteam.com/pk/date.htm