JS日历,很好看的一个JS日历

  1. <Script LANGUAGE="JavaScript">
  2.  var months = new Array("一""二""三","四""五""六""七""八""九","十""十一""十二");
  3.  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
  4.  var days = new Array("日","一""二""三","四""五""六");
  5.  var classTemp;
  6.  var today=new getToday();
  7.  var year=today.year;
  8.  var month=today.month;
  9.  var newCal; 
  10.  function getDays(month, year) {
  11.   if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  12.   else return daysInMonth[month];
  13.  }
  14.  function getToday() {
  15.   this.now = new Date();
  16.   this.year = this.now.getFullYear();
  17.   this.month = this.now.getMonth();
  18.   this.day = this.now.getDate();
  19.  }
  20.  function Calendar() {
  21.   newCal = new Date(year,month,1);
  22.   today = new getToday();   
  23.   var day = -1;
  24.   var startDay = newCal.getDay();
  25.   var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  26.   var daily = 0;
  27.   if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  28.   {
  29.    day = today.day;
  30.   }
  31.   var caltable = document.all.caltable.tBodies.calendar;
  32.   var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
  33.   for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
  34.    for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
  35.    {
  36.     var cell = caltable.rows[intWeek].cells[intDay];
  37.     var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
  38.     if ((intDay == startDay) && (0 == daily)){ daily = 1;}
  39.     var daytemp=daily<10?("0"+daily):(daily);
  40.     var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
  41.     if(day==daily) cell.className="DayNow";
  42.     else if(intDay==6) cell.className = "DaySat";
  43.     else if (intDay==0) cell.className ="DaySun";
  44.     else cell.className="Day";
  45.     if ((daily > 0) && (daily <= intDaysInMonth))
  46.     {
  47.      cell.innerText = daily;
  48.      daily++;
  49.     } else
  50.     {
  51.      cell.className="CalendarTD";
  52.      cell.innerText = "";
  53.     }
  54.   }
  55.   document.all.year.value=year;
  56.   document.all.month.value=month+1;
  57.  }
  58.  function subMonth()
  59.  {
  60.   if ((month-1)<0)
  61.   {
  62.    month=11;
  63.    year=year-1;
  64.   } else
  65.   {
  66.    month=month-1;
  67.   }
  68.   Calendar();
  69.  }
  70.  function addMonth()
  71.  {
  72.   if((month+1)>11)
  73.   {
  74.    month=0;
  75.    year=year+1;
  76.   } else
  77.   {
  78.    month=month+1;
  79.   }
  80.   Calendar();
  81.  }
  82.  function setDate() 
  83.  {
  84.   if (document.all.month.value<1||document.all.month.value>12)
  85.   {
  86.    alert("月的有效范围在1-12之间!");
  87.    return;
  88.   }
  89.   year=Math.ceil(document.all.year.value);
  90.   month=Math.ceil(document.all.month.value-1);
  91.   Calendar();
  92.  }
  93. </Script>
  94. <Script>
  95. function buttonOver()
  96. {
  97.  var obj = window.event.srcElement;
  98.  obj.runtimeStyle.cssText = "background-color:#FFFFFF";
  99. // obj.className="Hover";
  100. }
  101. function buttonOut()
  102. {
  103.  var obj = window.event.srcElement;
  104.  window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
  105. }
  106. </Script>
  107. <Style>
  108. Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
  109. .Calendar {font-family: verdana;text-decoration: none; 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
  110. .CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;11%;text-align: center;}
  111. .Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top- 1px;border-right- 1px;border-bottom- 1px;border-left- 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}
  112. .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;11%;text-align: center;}
  113. .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px; 12%;}
  114. .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px; 12%;}
  115. .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
  116. .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;11%;text-align: center;}
  117. .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px; 12%;}
  118. .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px; 12%;}
  119. .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
  120. </Style>
  121. <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
  122. <thead>
  123.      <tr align="center" valign="middle"
  124.   <td colspan="7" class="Title">
  125.    <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  126.   </td>
  127.  </tr>
  128.  <tr align="center" valign="middle"
  129.   <Script LANGUAGE="JavaScript">  
  130.    document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 
  131.    for (var intLoop = 1; intLoop < days.length-1;intLoop++) 
  132.     document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 
  133.     document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 
  134.   </Script>
  135.  </TR> 
  136. </thead>
  137. <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
  138.  <Script LANGUAGE="JavaScript">
  139.   for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  140.   {
  141.    document.write("<TR style='cursor:hand'>");
  142.    for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
  143.    document.write("</TR>");
  144.   } 
  145.  </Script>
  146. </TBODY>
  147. </TABLE>
  148. <Script  LANGUAGE="JavaScript">
  149.  Calendar();
  150. </Script>
原文地址:https://www.cnblogs.com/dingdingmao/p/3146577.html