熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JS特效代碼--日歷生成器

2013-11-15 12:10:19  來源: JSP教程 

  <html>

  <head> <meta httpequiv="ContentType" content="text/html; charset=gb"> <title>網頁特效|Linkwebcn/Js|日歷生成器</title> </head>   <body>   <SCRIPT LANGUAGE="JavaScript"> <! Begin var dDate = new Date(); var dCurMonth = dDategetMonth(); var dCurDayOfMonth = dDategetDate(); var dCurYear = dDategetFullYear(); var objPrevElement = new Object();   function fToggleColor(myElement) { var toggleColor = "#ff"; if (myElementid == "calDateText") { if (myElementcolor == toggleColor) { myElementcolor = ""; } else { myElementcolor = toggleColor;    } } else if (myElementid == "calCell") { for (var i in myElementchildren) { if (myElementchildren[i]id == "calDateText") { if (myElementchildren[i]color == toggleColor) { myElementchildren[i]color = ""; } else { myElementchildren[i]color = toggleColor;             }          }       }    } } function fSetSelectedDay(myElement){ if (myElementid == "calCell") { if (!isNaN(parseInt(myElementchildren["calDateText"]innerText))) { myElementbgColor = "#ccc"; objPrevElementbgColor = ""; documentallcalSelectedDatevalue = parseInt(myElementchildren["calDateText"]innerText); objPrevElement = myElement;       }    } } function fGetDaysInMonth(iMonth iYear) { var dPrevDate = new Date(iYear iMonth ); return dPrevDategetDate(); } function fBuildCal(iYear iMonth iDayStyle) { var aMonth = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); aMonth[] = new Array(); var dCalDate = new Date(iYear iMonth ); var iDayOfFirst = dCalDategetDay(); var iDaysInMonth = fGetDaysInMonth(iMonth iYear); var iVarDate = ; var i d w; if (iDayStyle == ) { aMonth[][] = "Sunday"; aMonth[][] = "Monday"; aMonth[][] = "Tuesday"; aMonth[][] = "Wednesday"; aMonth[][] = "Thursday"; aMonth[][] = "Friday"; aMonth[][] = "Saturday"; } else if (iDayStyle == ) { aMonth[][] = "Sun"; aMonth[][] = "Mon"; aMonth[][] = "Tue"; aMonth[][] = "Wed"; aMonth[][] = "Thu"; aMonth[][] = "Fri"; aMonth[][] = "Sat"; } else { aMonth[][] = "Su"; aMonth[][] = "Mo"; aMonth[][] = "Tu"; aMonth[][] = "We"; aMonth[][] = "Th"; aMonth[][] = "Fr"; aMonth[][] = "Sa"; } for (d = iDayOfFirst; d < ; d++) { aMonth[][d] = iVarDate; iVarDate++; } for (w = ; w < ; w++) { for (d = ; d < ; 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); documentwrite("<table border=>") documentwrite("<tr>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("<td align=center style=FONTFAMILY:Arial;FONTSIZE:px;FONTWEIGHT: bold>" + myMonth[][] + "</td>"); documentwrite("</tr>"); for (w = ; w < ; w++) { documentwrite("<tr>") for (d = ; d < ; d++) { documentwrite("<td align=left valign=top width=" + iCellWidth + " height=" + iCellHeight + " id=calCell style=CURSOR:Hand onMouseOver=fToggleColor(this) onMouseOut=fToggleColor(this) onclick=fSetSelectedDay(this)>"); if (!isNaN(myMonth[w][d])) { documentwrite("<font id=calDateText onMouseOver=fToggleColor(this) style=CURSOR:Hand;FONTFAMILY:Arial;FONTSIZE:" + sDateTextSize + ";FONTWEIGHT:" + sDateTextWeight + " onMouseOut=fToggleColor(this) onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>"); } else { documentwrite("<font id=calDateText onMouseOver=fToggleColor(this) style=CURSOR:Hand;FONTFAMILY:Arial;FONTSIZE:" + sDateTextSize + ";FONTWEIGHT:" + sDateTextWeight + " onMouseOut=fToggleColor(this) onclick=fSetSelectedDay(this)> </font>"); } documentwrite("</td>") } documentwrite("</tr>"); } documentwrite("</table>") } function fUpdateCal(iYear iMonth) { myMonth = fBuildCal(iYear iMonth); objPrevElementbgColor = ""; documentallcalSelectedDatevalue = ""; for (w = ; w < ; w++) { for (d = ; d < ; d++) { if (!isNaN(myMonth[w][d])) { calDateText[((*w)+d)]innerText = myMonth[w][d]; } else { calDateText[((*w)+d)]innerText = " ";          }       }    } } // End > </script>   第二步:把如下代碼加入<body>區域中: <script language="JavaScript" for=window event=onload> <! Begin var dCurDate = new Date(); frmCalendarSampletbSelMonthoptions[dCurDategetMonth()]selected = true; for (i = ; i < frmCalendarSampletbSelYearlength; i++) if (frmCalendarSampletbSelYearoptions[i]value == dCurDategetFullYear()) frmCalendarSampletbSelYearoptions[i]selected = true; //  End > </script>   <form name="frmCalendarSample" method="post" action=""> <input type="hidden" name="calSelectedDate" value="">   <table border=""> <tr> <td> <select name="tbSelMonth" onchange=fUpdateCal(frmCalendarSampletbSelYearvalue frmCalendarSampletbSelMonthvalue)> <option value="">January</option> <option value="">February</option> <option value="">March</option> <option value="">April</option> <option value="">May</option> <option value="">June</option> <option value="">July</option> <option value="">August</option> <option value="">September</option> <option value="">October</option> <option value="">November</option> <option value="">December</option> </select>    <select name="tbSelYear" onchange=fUpdateCal(frmCalendarSampletbSelYearvalue frmCalendarSampletbSelMonthvalue)> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <td> <script language="JavaScript"> var dCurDate = new Date(); fDrawCal(dCurDategetFullYear() dCurDategetMonth()+ "px" "bold" ); </script> </td> </tr> </table> </form>  
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20433.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.