日期:2014-05-18 浏览次数:20086 次
简单的日历选择,使用浮动的Iframe可以挡住select,月份选择功能,兼容IE6、IE7和FF。
以下是HTML网页特效代码,点击运行按钮可查看效果: 以下是程序代码<style type="text/css"> fieldset { margin:5px; padding:0 12px 12px 12px; border:1px solid #D4D4D4; background-color:#F9F9F9; } legend { font-weight:bold; } </style> <fieldset> <legend>说明</legend> 前两年写的东东,不是很规范,可以满足一些基本的功能要求,简单的日历选择,使用浮动的Iframe可以挡住select,月份选择功能,兼容IE6、IE7和FF。 </fieldset> <fieldset> <legend>功能演示</legend> <script language="javascript"> /********************** 日期选择 *************************** * @作者 : Enjoyd * @Email : enjoyd@126.com * @OICQ : 5003427 转载请注明出处 http://www.5aiqu.com '**************************************************************************/ var MonthDNum=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); var MonthText=new Array("","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); var Calendar_obj,Calendar_obj2; //var WriteHead=1; document.write('<iframe style="position:absolute;width:206px;display:none;" name="divCalendar" id="divCalendar" frameborder="0" scrolling="no"></iframe>') /*头部信息CSS及JS函数*/ var HeadMsg='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+ '<html xmlns="http://www.w3.org/1999/xhtml">'+ '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"><!--'+ 'body,html{margin:0px;height:100%;background:#FFF;}a,li,input {font-family:"Verdana","Arial";font-size:12px;}'+ 'a {height:18px;color:#000;padding-top:2px;text-decoration:none;display:block;}'+ 'a:hover{height:17px;padding-top:1px;border:1px solid #000;background:#FFF;}'+ '.CurrentDate {height:17px;padding-top:1px;border:1px solid #000;background: #FFF;}'+ 'ul{list-style:none;margin:0px;padding:0px;overflow:hidden;}'+ 'ul li{float:left;margin-left:1px;padding-top:1px;display:inline;text-align:center;width:28px;height:20px;}'+ '#Tools {width:204px;background:#5563B0;padding:0px;}'+ '#Tools li{padding-bottom:1px;}'+ '#Tools a{color:#FFF;}'+ '#Tools a:hover{border:1px solid #2E3665;background:#979FCE;}'+ '#Title {width:204px;background:#CAD3E8;border-bottom:1px solid #000;}'+ '#Title li{height:16px;padding-top:2px;}'+ '#sYear,#sMonth {width:44px;height:16px;border:1px solid #88A9C9;border-right:0;padding-top:2px;}'+ '#SArr {width:19px;height:18px;background:#E2EBF4;font-size:10px;text-align:center;color:#5563B0;border:1px solid #88A9C9;border-left:0;margin-right:3px;cursor:pointer;}'+ '#Select {width:63px;border:1px solid #8AC;background:#FFF;height:146px;}'+ '#Select a{height:16px;padding-left:3px;}'+ '#Select a:hover{color:#000;background:#E2EBF4;padding-top:2px;border:0;}'+ '#Select #SelectBn {background:#C7CDEF;font-size:8px;line-height:7px;height:7px;text-align:center;color:#5563B0;}'+ '#Select #SelectBn:hover{background:#7682C1;color:#FFF;}#SArr,#sYear,#sMonth{float:left;}'+ '#SelectYear,#SelectMonth{position:absolute;top:21px;z-index:1;overflow:hidden;display:none;}'+ '--></style><scr'+ 'ipt language="JavaScript">var mdown,sy,ey,sm,em,HideSelect=1,CurrentSelect,year,month,day;function Scroll(str,key)'+ '{var Html="",s,e,obj,d;'+ 'if(key=="Y"){s=sy;e=ey;obj="SelectYearItem";d="年";}if(key=="M"){s=sm;e=em;obj="SelectMonthItem";d="";}'+ 'if(str=="Up"){s--;e--;}if(str=="Next"){s++;e++;}'+ 'if(key=="Y"){sy=s;ey=e;}if(key=="M"){if(s<1)s=1;if(s>6)s=6;if