English
中文(简体)
中文(繁体)
한국어
日本語
English
Português
Español
Русский
العربية
Indonesia
Deutsch
Français
ภาษาไทย
Home
Downcodes
Programming Related
Website Building Resources
Books and Tutorials
Web Design Tutorials
Network Programming Tutorials
Mobile Games
Mobile Software
Articles
Home
>
Web design tutorial
>
Javascript tutorial
A very nice scripted calendar
Author:Eve Cole
Update Time:2009-06-08 18:33:56
<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>
Related Articles
An in-depth chat about JavaScript
2022-06-27
Debugging JavaScript errors
2010-08-08
JavaScript framework comparison
2010-04-28
JavaScript Object Discussion
2009-12-12
JavaScript Object Discussion
2009-12-10
Understanding Javascript Arrays
2009-08-25
css cross site javascript
2009-06-12
How to pass parameters to JavaScript files in JavaScript
2009-06-11
javascript custom function
2009-06-11
Use JavaScript with caution with
2009-06-11
javascript pagination
2009-06-09
JavaScript slideshow effect
2009-06-08