一个JavaScript的日历

| No Comments | No TrackBacks

<Script LANGUAGE="JavaScript">

  var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");


  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);


  var days = new Array("日","一", "二", "三","四", "五", "六");


  var classTemp;


  var today=new getToday();


  var year=today.year;


  var month=today.month;


  var newCal;


  function getDays(month, year) {


  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;


  else return daysInMonth[month];


  }


  function getToday() {


  this.now = new Date();


  this.year = this.now.getFullYear();


  this.month = this.now.getMonth();


  this.day = this.now.getDate();


  }


  function Calendar() {


  newCal = new Date(year,month,1);


  today = new getToday();


  var day = -1;


  var startDay = newCal.getDay();


  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());


  var daily = 0;


  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))


  {


  day = today.day;


  }


  var caltable = document.all.caltable.tBodies.calendar;


  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());


  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)


  for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)


  {


  var cell = caltable.rows[intWeek].cells[intDay];


  var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);


  if ((intDay == startDay) && (0 == daily)){ daily = 1;}


  var daytemp=daily<10?("0"+daily):(daily);


  var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";


  if(day==daily) cell.className="DayNow";


  else if(intDay==6) cell.className = "DaySat";


  else if (intDay==0) cell.className ="DaySun";


  else cell.className="Day";


  if ((daily > 0) && (daily <= intDaysInMonth))


  {


  cell.innerText = daily;


  daily++;


  } else


  {


  cell.className="CalendarTD";


  cell.innerText = "";


  }


  }


  document.all.year.value=year;


  document.all.month.value=month+1;


  }


  function subMonth()


  {


  if ((month-1)<0)


  {


  month=11;


  year=year-1;


  } else


  {


  month=month-1;


  }


  Calendar();


  }


  function addMonth()


  {


  if((month+1)>11)


  {


  month=0;


  year=year+1;


  } else


  {


  month=month+1;


  }


  Calendar();


  }


  function setDate()


  {


  if (document.all.month.value<1||document.all.month.value>12)


  {


  alert("月的有效范围在1-12之间!");


  return;


  }


  year=Math.ceil(document.all.year.value);


  month=Math.ceil(document.all.month.value-1);


  Calendar();


  }


  </Script>


  <Script>


  function buttonOver()


  {


  var obj = window.event.srcElement;


  obj.runtimeStyle.cssText = "background-color:#FFFFFF";


  // obj.className="Hover";


  }


  function buttonOut()


  {


  var obj = window.event.srcElement;


  window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);


  }


  </Script>


  <Style>


  Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}


  .Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}


  .CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}


  .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-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}


  .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}


  .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}


  .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}


  .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}


  .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}


  .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}


  .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}


  .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}


  </Style>


  <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">


  <thead>


  <tr align="center" valign="middle">


  <td colspan="7" class="Title">


  <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>


  </td>


  </tr>


  <tr align="center" valign="middle">


  <Script LANGUAGE="JavaScript">


  document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");


  for (var intLoop = 1; intLoop < days.length-1;intLoop++)


  document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");


  document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");


  </Script>


  </TR>


  </thead>


  <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">


  <Script LANGUAGE="JavaScript">


  for (var intWeeks = 0; intWeeks < 6; intWeeks++)


  {


  document.write("<TR style='cursor:hand'>");


  for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");


  document.write("</TR>");


  }


  </Script>


  </TBODY>


  </TABLE>


  <Script LANGUAGE="JavaScript">


  Calendar();


  </Script>

No TrackBacks

TrackBack URL: http://www.wujianrong.com/mt-tb.cgi/1437

Leave a comment

About this Entry

This page contains a single entry by kevinwu published on November 30, 2006 10:12 AM.

javascript实现日历式日期选择 was the previous entry in this blog.

javaScript小日历 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.