本文主要是介绍javascript简易万年历，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 简单万年历 </title>
<script language="javascript">
<!--//构造Date对象，并返回当前的年月日var dDate = new Date();var dCurMonth = dDate.getMonth();var dCurDayOfMonth = dDate.getDate();var dCurYear = dDate.getFullYear();//创建Object对象var objPrevElement = new Object();//选择字体颜色function fToggleColor(myElement){var toggleColor = "#ff0000";if(myElement.id == "calDateText"){if (myElement.color == toggleColor){myElement.color = "";}else{myElement.color = toggleColor;}}else if (myElement.id == "calCell"){for (var i in myElement.children ){if (myElement.children[i].id == "calDateText"){if (myElement.children[i].color == toggleColor){myElement.children[i].color="";}else{myElement.children[i].color = toggleColor;}}}}}//鼠标单击日期时function fSetSelectedDay(myElement){if(myElement.id == "calCell"){if(!isNaN(parseInt(myElement.children["calDateText"].innerText))){myElement.bgColor = "#c0c0c0";objPrevElement.bgColor="";document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);objPrevElement = myElement;}}}//返回一个月中第几天的值function fGetDaysInMonth(iMonth,iYear){var dPrevDate = new Date(iYear,iMonth,0);return dPrevDate.getDate();}//构造日历function fBuildCal(iYear,iMonth,iDayStyle){var aMonth = new Array();aMonth[0] = new Array(7);aMonth[1] = new Array(7);aMonth[2] = new Array(7);aMonth[3] = new Array(7);aMonth[4] = new Array(7);aMonth[5] = new Array(7);aMonth[6] = new Array(7);//设置星期的显示方式if(iDayStyle == 1){aMonth[0][0] = "Sun";aMonth[0][1] = "Mon";aMonth[0][2] = "Tue";aMonth[0][3] = "Wed";aMonth[0][4] = "Thu";aMonth[0][5] = "Fri";aMonth[0][6] = "Sat";}else{aMonth[0][0] = "Su";aMonth[0][1] = "Mo";aMonth[0][2] = "Tu";aMonth[0][3] = "We";aMonth[0][4] = "Th";aMonth[0][5] = "Fr";aMonth[0][6] = "Sa";}//构造日期函数var dCalDate = new Date(iYear , iMonth-1 ,1 );var iDayOfFirst = dCalDate.getDay(); //返回星期值//返回这个月中的第几天值var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);var iVarDate = 1;var i,d,w;for (d = iDayOfFirst;d<7 ;d++ ){aMonth[1][d] = iVarDate;iVarDate++;}//向日历列表中添加数字for (w =2 ; w<7 ; w++ ){for (d = 0 ; d<7 ; d++ ){if (iVarDate<=iDaysInMonth){aMonth[w][d] = iVarDate;iVarDate++;}}}return aMonth;}//在页面中显示日历表格function fDrawCal(iYear , iMonth, iCellWidth , iCellHeight , sDateTextSize , sDateTextWeight ,iDayStyle){var myMonth;myMonth = fBuildCal(iYear,iMonth,iDayStyle);document.write("<table border='1'>");document.write("<tr>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][0] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][1] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][2] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][3] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][4] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][5] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][6] + "</td>");document.write("</tr>");for (w =1; w<6 ;w++ ){document.write("<tr>");for (d=0 ;d<7 ;d++ ){document.write("<td align='center' valign='top' width='"+iCellWidth+"' height='"+iCellHeight+"' id='calCell' style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>");if(!isNaN(myMonth[w][d])){document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");}else{document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)> </font>");}document.write("</td>");}document.write("</tr>");}document.write("</table>");}//刷新指定年月日的日历内容function fUpdateCal(iYear,iMonth){myMonth = fBuildCal(iYear,iMonth);objPrevElement.bgColor = "";document.all.calSelectedDate.value="";for (w =1;w<6 ;w++ ){for (d=0;d<7 ;d++ ){if (!isNaN(myMonth[w][d])){calDateText[((7*w)+d)-7].innerText = myMonth[w][d];}else{calDateText[((7*w)+d)-7].innerText = "";}}}}-->
</script>
</head><body bgcolor="f9fcff">
<script language="javascript" for=window event=onload>
<!--//页面加载时，则执行以下代码var dCurDate = new Date();//在日历列表中指定当前的月份frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;//在日历列表中指定当前的年份for (i=0;i<frmCalendarSample.tbSelYear.length ;i++ ){if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear()){frmCalendarSample.tbSelYear.options[i].selected = true;}}
-->
</script><form name="frmCalendarSample" method="post" action=""><input type="hidden" name="calSelectedDate" value=""/><table border="1"><tr><td><select name="tbSelMonth" οnchange='fUpdateCal(frmCalendarSample.tbSelYear.value,frmCalendarSample.tbSelMonth.value)'><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select><select name="tbSelYear" οnchange='fUpdateCal(frmCalendarSample.tbSelYear.value,frmCalendarSample.tbSelMonth.value)'><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option></select></td></tr><tr><td><script language="javascript">var dCurDate = new Date(); //构造当前Date对象//调用fDrawCal函数，在页面中显示当前日期的日历fDrawCal(dCurDate.getFullYear(),dCurDate.getMonth()+1,30,30,"12px","bold",1);</script></td></tr></table>
</form>
</body>
</html>
这篇关于javascript简易万年历的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
