?? time5.htm
字號:
<HTML>
<HEAD>
<TITLE>程序員大本營--Javascript</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY BGCOLOR=WHITE LINK=#0033CC>
<p><b><font size="5" color="#660033">
日歷生成器
</font></b></p>
<FONT FACE="Arial, Helvetica" SIZE=2>
<HR NOSHADE SIZE=1>
</FONT>
<div align="center">
<center>
<table border="0" width="80%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"> <p>
腳本說明:<br>第一步:把如下代碼加入<head>區(qū)域中:<br> <SCRIPT LANGUAGE="JavaScript"><br><!-- Begin<br>var dDate = new Date();<br>var dCurMonth = dDate.getMonth();<br>var dCurDayOfMonth = dDate.getDate();<br>var dCurYear = dDate.getFullYear();<br>var objPrevElement = new Object();<br><br>function fToggleColor(myElement) {<br>var toggleColor = "#ff0000";<br>if (myElement.id == "calDateText") {<br>if (myElement.color == toggleColor) {<br>myElement.color = "";<br>} else {<br>myElement.color = toggleColor;<br> }<br>} else if (myElement.id == "calCell") {<br>for (var i in myElement.children) {<br>if (myElement.children[i].id == "calDateText") {<br>if (myElement.children[i].color == toggleColor) {<br>myElement.children[i].color = "";<br>} else {<br>myElement.children[i].color = toggleColor;<br> }<br> }<br> }<br> }<br>}<br>function fSetSelectedDay(myElement){<br>if (myElement.id == "calCell") {<br>if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {<br>myElement.bgColor = "#c0c0c0";<br>objPrevElement.bgColor = "";<br>document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);<br>objPrevElement = myElement;<br> }<br> }<br>}<br>function fGetDaysInMonth(iMonth, iYear) {<br>var dPrevDate = new Date(iYear, iMonth, 0);<br>return dPrevDate.getDate();<br>}<br>function fBuildCal(iYear, iMonth, iDayStyle) {<br>var aMonth = new Array();<br>aMonth[0] = new Array(7);<br>aMonth[1] = new Array(7);<br>aMonth[2] = new Array(7);<br>aMonth[3] = new Array(7);<br>aMonth[4] = new Array(7);<br>aMonth[5] = new Array(7);<br>aMonth[6] = new Array(7);<br>var dCalDate = new Date(iYear, iMonth-1, 1);<br>var iDayOfFirst = dCalDate.getDay();<br>var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);<br>var iVarDate = 1;<br>var i, d, w;<br>if (iDayStyle == 2) {<br>aMonth[0][0] = "Sunday";<br>aMonth[0][1] = "Monday";<br>aMonth[0][2] = "Tuesday";<br>aMonth[0][3] = "Wednesday";<br>aMonth[0][4] = "Thursday";<br>aMonth[0][5] = "Friday";<br>aMonth[0][6] = "Saturday";<br>} else if (iDayStyle == 1) {<br>aMonth[0][0] = "Sun";<br>aMonth[0][1] = "Mon";<br>aMonth[0][2] = "Tue";<br>aMonth[0][3] = "Wed";<br>aMonth[0][4] = "Thu";<br>aMonth[0][5] = "Fri";<br>aMonth[0][6] = "Sat";<br>} else {<br>aMonth[0][0] = "Su";<br>aMonth[0][1] = "Mo";<br>aMonth[0][2] = "Tu";<br>aMonth[0][3] = "We";<br>aMonth[0][4] = "Th";<br>aMonth[0][5] = "Fr";<br>aMonth[0][6] = "Sa";<br>}<br>for (d = iDayOfFirst; d < 7; d++) {<br>aMonth[1][d] = iVarDate;<br>iVarDate++;<br>}<br>for (w = 2; w < 7; w++) {<br>for (d = 0; d < 7; d++) {<br>if (iVarDate <= iDaysInMonth) {<br>aMonth[w][d] = iVarDate;<br>iVarDate++;<br> }<br> }<br>}<br>return aMonth;<br>}<br>function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {<br>var myMonth;<br>myMonth = fBuildCal(iYear, iMonth, iDayStyle);<br>document.write("<table border='1'>")<br>document.write("<tr>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");<br>document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");<br>document.write("</tr>");<br>for (w = 1; w < 7; w++) {<br>document.write("<tr>")<br>for (d = 0; d < 7; d++) {<br>document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");<br>if (!isNaN(myMonth[w][d])) {<br>document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");<br>} else {<br>document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");<br>}<br>document.write("</td>")<br>}<br>document.write("</tr>");<br>}<br>document.write("</table>")<br>}<br>function fUpdateCal(iYear, iMonth) {<br>myMonth = fBuildCal(iYear, iMonth);<br>objPrevElement.bgColor = "";<br>document.all.calSelectedDate.value = "";<br>for (w = 1; w < 7; w++) {<br>for (d = 0; d < 7; d++) {<br>if (!isNaN(myMonth[w][d])) {<br>calDateText[((7*w)+d)-7].innerText = myMonth[w][d];<br>} else {<br>calDateText[((7*w)+d)-7].innerText = " ";<br> }<br> }<br> }<br>}<br>// End --><br></script><br><br>第二步:把如下代碼加入<body>區(qū)域中:<br><script language="JavaScript" for=window event=onload><br><!-- Begin<br>var dCurDate = new Date();<br>frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;<br>for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)<br>if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())<br>frmCalendarSample.tbSelYear.options[i].selected = true;<br>// End --><br></script><br><br><form name="frmCalendarSample" method="post" action=""><br><input type="hidden" name="calSelectedDate" value=""><br><br><table border="1"><br><tr><br><td><br><select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><br><option value="1">January</option><br><option value="2">February</option><br><option value="3">March</option><br><option value="4">April</option><br><option value="5">May</option><br><option value="6">June</option><br><option value="7">July</option><br><option value="8">August</option><br><option value="9">September</option><br><option value="10">October</option><br><option value="11">November</option><br><option value="12">December</option><br></select><br> <br><select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><br><option value="1998">1998</option><br><option value="1999">1999</option><br><option value="2000">2000</option><br><option value="2001">2001</option><br><option value="2002">2002</option><br><option value="2003">2003</option><br><option value="2004">2004</option><br></select><br></td><br></tr><br><tr><br><td><br><script language="JavaScript"><br>var dCurDate = new Date();<br>fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);<br></script><br></td><br></tr><br></table><br></form><br>
</p></td>
</tr>
</table>
</center>
</div>
<hr noshade size=1>
</BODY>
</HTML>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -