js 万年历控件

效果截图如下：

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> TD { FONT-SIZE: 12px; COLOR: #565656 } P { FONT-SIZE: 12px; COLOR: #565656 } LI { FONT-SIZE: 12px; COLOR: #565656 } SELECT { FONT-SIZE: 12px; COLOR: #565656 } INPUT { FONT-SIZE: 12px; COLOR: #565656 } TEXTAREA { FONT-SIZE: 12px; COLOR: #565656 } .f14 { FONT-SIZE: 14px } BUTTON { BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; WIDTH: 60px; HEIGHT: 21px; BACKGROUND-COLOR: #f9d7ef; BORDER-RIGHT-WIDTH: 1px } </STYLE> <SCRIPT language=JScript>  </SCRIPT> <SCRIPT language=JavaScript></SCRIPT> <META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD> <BODY bgColor=#f5f5f5 topMargin=10 onload=initialize() marginheight="5"> <CENTER> <FORM name=CLD> <DIV id=detail style="Z-INDEX: 3; FILTER: shadow(color=#333333,direction=135); LEFT: 6px; WIDTH: 140px; POSITION: absolute; TOP: 40px; HEIGHT: 120px"></DIV><FONT face=宋体> <TABLE cellSpacing=0 cellPadding=0 width=395 bgColor=#ffffff> <TBODY> <TR> <TD colSpan=2 height=85> <TABLE cellSpacing=0 cellPadding=0 width=464 border=0> <TBODY> <TR> <TD align=middle width=42 bgColor=#ffffff height=66> </TD> <TD align=left width=421 bgColor=#ffffff> <DIV align=left></DIV> <TABLE cellSpacing=0 cellPadding=0 width="95%" border=0> <TBODY> <TR> <TD width=11 height=29> </TD> <TD width=358 bgColor=e7eef8> <TABLE cellSpacing=0 cellPadding=0 width="100%" background="" border=0> <TBODY> <TR> <TD style="PADDING-LEFT: 8px" mce_style="PADDING-LEFT: 8px" height=29><FONT style="FONT-SIZE: 9pt;align:center;" mce_style="FONT-SIZE: 9pt;align:center;" color=#000000 size=2>公元 <SELECT style="FONT-SIZE: 9pt" mce_style="FONT-SIZE: 9pt" onchange=changeCld() name=SY> <SCRIPT language=JavaScript> for(i=1900;i<2101;i++) document.write('<option>'+i) </SCRIPT> </SELECT> 年 <SELECT style="FONT-SIZE: 9pt" mce_style="FONT-SIZE: 9pt" onchange=changeCld() name=SM> <SCRIPT language=JavaScript></SCRIPT> </SELECT> 月 </FONT><FONT id=GZ face=标楷体 color=#ffffff size=4> </FONT></TD> <TD style="PADDING-RIGHT: 16px; PADDING-TOP: 4px" mce_style="PADDING-RIGHT: 16px; PADDING-TOP: 4px" align=right><FONT style="FONT-SIZE: 14px; FILTER: Glow(color='#ff0099', Strength='2'); COLOR: #ffffff; HEIGHT: 0px"><B></B></FONT></TD></TR></TBODY></TABLE></TD> <TD width=29> </TD></TR> <TR> <TD background="" height=29> </TD> <TD height=29> <TABLE cellSpacing=1 cellPadding=0 border=0> <TBODY> <TR align=middle bgColor=#e7eef8> <TD width=55 height=35>日<BR>SUN </TD> <TD width=55>一<BR>MON </TD> <TD width=55>二<BR>TUE </TD> <TD width=55>三<BR>WED </TD> <TD width=55>四<BR>THU </TD> <TD width=55>五<BR>FRI </TD> <TD width=55>六<BR>SAT </TD></TR> <SCRIPT language=JavaScript></SCRIPT> </TBODY></TABLE></TD> <TD background="" height=29> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD> </TD> <TD></TD></TR><tr><td valign="top"><br></td><td valign="top"><br></td></tr></TBODY></TABLE></FONT> <TABLE cellSpacing=0 cellPadding=0 width=464 height=40 bgColor=#e7eef8 border=0> <TBODY> <TR> <TD style="PADDING-TOP: 6px" mce_style="PADDING-TOP: 6px" align=middle height=22><BUTTON style="MARGIN-LEFT: 5px; MARGIN-RIGHT: 3px" mce_style="MARGIN-LEFT: 5px; MARGIN-RIGHT: 3px" onclick="pushBtm('YD')"><FONT color=#ff35a1>下一年</FONT></BUTTON><BUTTON style="MARGIN-RIGHT: 6px" mce_style="MARGIN-RIGHT: 6px" onclick="pushBtm('YU')"><FONT color=#ff35a1>上一年</FONT></BUTTON><BUTTON style="MARGIN-LEFT: 5px; MARGIN-RIGHT: 3px" mce_style="MARGIN-LEFT: 5px; MARGIN-RIGHT: 3px" onclick="pushBtm('MD')"><FONT color=#ff35a1>下一月</FONT></BUTTON><BUTTON onclick="pushBtm('MU')"><FONT color=#ff35a1>上一月</FONT></BUTTON><BUTTON style="MARGIN-LEFT: 62px" mce_style="MARGIN-LEFT: 62px" onclick="pushBtm('')"><FONT color=#ff35a1>本月</FONT></BUTTON> </TD></TR></TBODY></TABLE></FORM></CENTER> </BODY> </HTML>

代码使用说明：

上面的代码如果直接保存成html文件，然后打开的话，可能存在需要确认加载activex控件的提示，我的做法是这样的：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page import="context.User" %> <%@ page import="context.UserContext"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; String URL = basePath + "wannianli.html"; User user = (User)request.getSession().getAttribute(UserContext.LOGIN_USER_KEY); %> <iframe width=1150 height=600 name=aa frameborder=0 src="<%=URL" mce_src="<%=URL" %> ></iframe>