JavaScript时间日期特效：日历生成器代码

发布时间：2018-08-15 23:31 所属栏目：121 来源：站长网

导读：一个很久以前写的 Java Script时间日期特效：日历生成器代码，尽管作者已经无从获知了，烈火学院还是要表示感谢，该代码中写了2000年-2008年的时间段，大家可以根据其代码进行深加工一下，这样可以练习自己的JS编写水平，当然高手就不用了。演示： HTMLHE

　　一个很久以前写的JavaScript时间日期特效：日历生成器代码，尽管作者已经无从获知了，烈火学院还是要表示感谢，该代码中写了2000年-2008年的时间段，大家可以根据其代码“进行深加工”一下，这样可以练习自己的JS编写水平，当然高手就不用了。

　　演示：

<HTML> <HEAD> <TITLE>日历生成器</TITLE> </HEAD><BODY bgcolor="#fef4d2" background="../images/background3.jpg" > <br> <br> <center> <font color="ffaafa"> <h2><font color="#FF0000"><b>时间日期篇--日历生成器</b></font></h2> </font> <hr width=300> <br><br> <SCRIPT LANGUAGE="JavaScript"> var dDate = new Date(); var dCurMonth = dDate.getMonth(); var dCurDayOfMonth = dDate.getDate(); var dCurYear = dDate.getFullYear(); var objPrevElement = new Object(); function TToggleColor(myElement) { var toggleColor = "#ff0000"; if (myElement.id == "calendarDate") { if (myElement.color == toggleColor) { myElement.color = ""; } else { myElement.color = toggleColor; } } else if (myElement.id == "calendarCell") { for (var i in myElement.children) { if (myElement.children[i].id == "calendarDate") { if (myElement.children[i].color == toggleColor) { myElement.children[i].color = ""; } else { myElement.children[i].color = toggleColor; } } } } } function TSetSelectedDay(myElement){ if (myElement.id == "calendarCell") { if (!isNaN(parseInt(myElement.children["calendarDate"].innerText))) { myElement.bgColor = "#c0c0c0"; objPrevElement.bgColor = ""; document.all.calSelectedDate.value = parseInt(myElement.children["calendarDate"].innerText); objPrevElement = myElement; } } } function TGetDaysInMonth(iMonth, iYear) { var dPrevDate = new Date(iYear, iMonth, 0); return dPrevDate.getDate(); } function TBuildCal(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); var dCalDate = new Date(iYear, iMonth-1, 1); var iDayOfFirst = dCalDate.getDay(); var iDaysInMonth = TGetDaysInMonth(iMonth, iYear); var iVarDate = 1; var i, d, w; if (iDayStyle == 2) { aMonth[0][0] = "星期日"; aMonth[0][1] = "星期一"; aMonth[0][2] = "星期二"; aMonth[0][3] = "星期三"; aMonth[0][4] = "星期四"; aMonth[0][5] = "星期五"; aMonth[0][6] = "星期六"; } else if (iDayStyle == 1) { aMonth[0][0] = "周日"; aMonth[0][1] = "周一"; aMonth[0][2] = "周二"; aMonth[0][3] = "周三"; aMonth[0][4] = "周四"; aMonth[0][5] = "周五"; aMonth[0][6] = "周六"; } else { aMonth[0][0] = "日"; aMonth[0][1] = "一"; aMonth[0][2] = "二"; aMonth[0][3] = "三"; aMonth[0][4] = "四"; aMonth[0][5] = "五"; aMonth[0][6] = "六"; } 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 TDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) { var myMonth; myMonth = TBuildCal(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 < 7; w++) { document.write("<tr>") for (d = 0; d < 7; d++) { document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='TToggleColor(this)' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)>"); if (!isNaN(myMonth[w][d])) { document.write("<font id=calendarDate onMouseOver='TToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)>" + myMonth[w][d] + "</font>"); } else { document.write("<font id=calendarDate onMouseOver='TToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)> </font>"); } document.write("</td>") } document.write("</tr>"); } document.write("</table>") } function TUpdateCal(iYear, iMonth) { myMonth = TBuildCal(iYear, iMonth); objPrevElement.bgColor = ""; document.all.calSelectedDate.value = ""; for (w = 1; w < 7; w++) { for (d = 0; d < 7; d++) { if (!isNaN(myMonth[w][d])) { calendarDate[((7*w)+d)-7].innerText = myMonth[w][d]; } else { calendarDate[((7*w)+d)-7].innerText = " "; } } } } </script> <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" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>  <option value="1"> 1月</option> <option value="2"> 2月</option> <option value="3"> 3月</option> <option value="4"> 4月</option> <option value="5"> 5月</option> <option value="6"> 6月</option> <option value="7"> 7月</option> <option value="8"> 8月</option> <option value="9"> 9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> <select name="tbSelYear" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>  <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <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> </select> </td> </tr> <tr>  <td> <script language="JavaScript"> var dCurDate = new Date(); TDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1); </script> </td> </tr> </table> </form> </center></BODY> </HTML> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）