小巧玲珑的网页中的常用的小日历[网页特效]

%26lt;<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>%26gt; %26lt;HEAD%26gt; %26lt;TITLE%26gt;有用的中英文日历<a href="http://edu.xinasp.com/web/list_81_1.html" target="_blank" class="keylink">网页特效</a>代码-knowsky.com%26lt;/TITLE%26gt; %26lt;!--%26lt;script language="javascript" src="PopupCalendar.js" %26gt;%26lt;/script%26gt;--%26gt; %26lt;script%26gt; //more from knowsky.com function PopupCalendar(InstanceName) { ///Global Tag this.instanceName=InstanceName; ///Properties this.separator="-" this.oBtnTodayTitle="Today" this.oBtnCancelTitle="Cancel" this.weekDaySting=new Array("S","M","T","W","T","F","S"); this.monthSting=new Array("January","February","March","April","May","June","July","August","September","October","November","December"); this.Width=200; this.currDate=new Date(); this.today=new Date(); this.startYear=1970; this.endYear=2010; ///Css this.divBorderCss="1px solid #BCD0DE"; this.tableBorderColor="#CCCCCC" ///Method this.Init=CalendarInit; this.Fill=CalendarFill; this.Refresh=CalendarRefresh; this.Restore=CalendarRestore; ///<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>Object this.oTaget=null; this.oPreviousCell=null; this.sDIVID=InstanceName+"oDiv"; this.sTABLEID=InstanceName+"oTable"; this.sMONTHID=InstanceName+"oMonth"; this.sYEARID=InstanceName+"oYear"; } function CalendarInit() ///Create panel { var sMonth,sYear sMonth=this.currDate.getMonth(); sYear=this.currDate.getYear(); htmlAll="%26lt;div id='"+this.sDIVID+"' style='display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'%26gt;"; htmlAll+="%26lt;div align='center'%26gt;"; /// Month htmloMonth="%26lt;select id='"+this.sMONTHID+"' onchange=CalendarMonthChange("+this.instanceName+") style='width:50%'%26gt;"; for(i=0;i%26lt;12;i++) { htmloMonth+="%26lt;option value='"+i+"'%26gt;"+this.monthSting[i]+"%26lt;/option%26gt;"; } htmloMonth+="%26lt;/select%26gt;"; /// Year htmloYear="%26lt;select id='"+this.sYEARID+"' onchange=CalendarYearChange("+this.instanceName+") style='width:50%'%26gt;"; for(i=this.startYear;i%26lt;=this.endYear;i++) { htmloYear+="%26lt;option value='"+i+"'%26gt;"+i+"%26lt;/option%26gt;"; } htmloYear+="%26lt;/select%26gt;%26lt;/div%26gt;"; /// Day htmloDayTable="%26lt;table id='"+this.sTABLEID+"' width='100%' border=0 cellpadding=0 cellspacing=1 bgcolor='"+this.tableBorderColor+"'%26gt;"; htmloDayTable+="%26lt;tbody bgcolor='#ffffff'style='font-size:13px'%26gt;"; for(i=0;i%26lt;=6;i++) { if(i==0) htmloDayTable+="%26lt;tr bgcolor='#98B8CD'%26gt;"; else htmloDayTable+="%26lt;tr%26gt;"; for(j=0;j%26lt;7;j++) { if(i==0) { htmloDayTable+="%26lt;td height='20' align='center' valign='middle' style='cursor:hand'%26gt;"; htmloDayTable+=this.weekDaySting[j]+"%26lt;/td%26gt;" } else { htmloDayTable+="%26lt;td height='20' align='center' valign='middle' style='cursor:hand'"; htmloDayTable+=" onmouseover=CalendarCellsMsOver("+this.instanceName+")"; htmloDayTable+=" onmouseout=CalendarCellsMsOut("+this.instanceName+")"; htmloDayTable+=" onclick=CalendarCellsClick(this,"+this.instanceName+")%26gt;"; htmloDayTable+=" %26lt;/td%26gt;" } } htmloDayTable+="%26lt;/tr%26gt;"; } htmloDayTable+="%26lt;/tbody%26gt;%26lt;/table%26gt;"; /// Today Button htmloButton="%26lt;div align='center' style='padding:3px'%26gt;" htmloButton+="%26lt;button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'" htmloButton+=" onclick=CalendarTodayClick("+this.instanceName+")%26gt;"+this.oBtnTodayTitle+"%26lt;/button%26gt; " htmloButton+="%26lt;button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'" htmloButton+=" onclick=CalendarCancel("+this.instanceName+")%26gt;"+this.oBtnCancelTitle+"%26lt;/button%26gt; " htmloButton+="%26lt;/div%26gt;" /// All htmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+"%26lt;/div%26gt;"; document.write(htmlAll); this.Fill(); } function CalendarFill() /// { var sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,sDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear sMonth=this.currDate.getMonth(); sYear=this.currDate.getYear(); sWeekDay=(new Date(sYear,sMonth,1)).getDay(); sToday=this.currDate.getDate(); oTable=document.all[this.sTABLEID]; currRow=oTable.rows[1]; MaxDay=CalendarGetMaxDay(sYear,sMonth); oSelectMonth=document.all[this.sMONTHID] oSelectMonth.selectedIndex=sMonth; oSelectYear=document.all[this.sYEARID] for(i=0;i%26lt;oSelectYear.length;i++) { if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i; } //// for(sDaySn=1,sIndex=sWeekDay;sIndex%26lt;=6;sDaySn++,sIndex++) { if(sDaySn==sToday) { currRow.cells[sIndex].inner<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>="%26lt;font color=red%26gt;%26lt;i%26gt;%26lt;b%26gt;"+sDaySn+"%26lt;/b%26gt;%26lt;/i%26gt;%26lt;/font%26gt;"; this.oPreviousCell=currRow.cells[sIndex]; } else { currRow.cells[sIndex].inner<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>=sDaySn; currRow.cells[sIndex].style.color="#666666"; } CalendarCellSetCss(0,currRow.cells[sIndex]); } for(rowIndex=2;rowIndex%26lt;=6;rowIndex++) { if(sDaySn%26gt;MaxDay)break; currRow=oTable.rows[rowIndex]; for(cellIndex=0;cellIndex%26lt;currRow.cells.length;cellIndex++) { if(sDaySn==sToday) { currRow.cells[cellIndex].inner<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>="%26lt;font color=red%26gt;%26lt;i%26gt;%26lt;b%26gt;"+sDaySn+"%26lt;/b%26gt;%26lt;/i%26gt;%26lt;/font%26gt;"; this.oPreviousCell=currRow.cells[cellIndex]; } else { currRow.cells[cellIndex].inner<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>=sDaySn; currRow.cells[cellIndex].style.color="#666666"; } CalendarCellSetCss(0,currRow.cells[cellIndex]); sDaySn++; if(sDaySn%26gt;MaxDay)break; } } } function CalendarRestore() /// Clear Data { var oTable oTable=document.all[this.sTABLEID] for(i=1;i%26lt;oTable.rows.length;i++) { for(j=0;j%26lt;oTable.rows[i].cells.length;j++) { CalendarCellSetCss(0,oTable.rows[i].cells[j]); oTable.rows[i].cells[j].inner<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>=" "; } } } function CalendarRefresh(newDate) /// { this.currDate=newDate; this.Restore(); this.Fill(); } function CalendarCellsMsOver(oInstance) /// Cell MouseOver { var myCell myCell=event.srcElement; CalendarCellSetCss(0,oInstance.oPreviousCell); if(myCell) { CalendarCellSetCss(1,myCell); oInstance.oPreviousCell=myCell; } } function CalendarCellsMsOut(oInstance) ////// Cell MouseOut { var myCell myCell=event.srcElement; CalendarCellSetCss(0,myCell); } function CalendarCellsClick(oCell,oInstance) { var sDay,sMonth,sYear,newDate sYear=oInstance.currDate.getFullYear(); sMonth=oInstance.currDate.getMonth(); sDay=oInstance.currDate.getDate(); if(oCell.innerText!=" ") { sDay=parseInt(oCell.innerText); if(sDay!=oInstance.currDate.getDate()) { newDate=new Date(sYear,sMonth,sDay); oInstance.Refresh(newDate); } } sDateString=sYear+oInstance.separator+CalendarDblNum(sMonth+1)+oInstance.separator+CalendarDblNum(sDay); ///return sDateString if(oInstance.oTaget.tagName=="INPUT") { oInstance.oTaget.value=sDateString; } document.all[oInstance.sDIVID].style.display="none"; } function CalendarYearChange(oInstance) /// Year Change { var sDay,sMonth,sYear,newDate sDay=oInstance.currDate.getDate(); sMonth=oInstance.currDate.getMonth(); sYear=document.all[oInstance.sYEARID].value newDate=new Date(sYear,sMonth,sDay); oInstance.Refresh(newDate); } function CalendarMonthChange(oInstance) /// Month Change { var sDay,sMonth,sYear,newDate sDay=oInstance.currDate.getDate(); sMonth=document.all[oInstance.sMONTHID].value sYear=oInstance.currDate.getYear(); newDate=new Date(sYear,sMonth,sDay); oInstance.Refresh(newDate); } function CalendarTodayClick(oInstance) /// "Today" button Change { oInstance.Refresh(new Date()); } function getDateString(oInputSrc,oInstance) { if(oInputSrc%26amp;%26amp;oInstance) { CalendarDiv=document.all[oInstance.sDIVID]; oInstance.oTaget=oInputSrc; CalendarDiv.style.pixelLeft=CalendargetPos(oInputSrc,"Left"); CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top")+oInputSrc.offsetHeight; CalendarDiv.style.display=(CalendarDiv.style.display=="none")?"":"none"; } } function CalendarCellSetCss(sMode,oCell) /// Set Cell Css { // sMode // 0: OnMouserOut 1: OnMouseOver if(sMode) { oCell.style.border="1px solid #5589AA"; oCell.style.backgroundColor="#BCD0DE"; } else { oCell.style.border="1px solid #FFFFFF"; oCell.style.backgroundColor="#FFFFFF"; } } function CalendarGetMaxDay(nowYear,nowMonth) /// Get MaxDay of current month { var nextMonth,nextYear,currDate,nextDate,theMaxDay nextMonth=nowMonth+1; if(nextMonth%26gt;11) { nextYear=nowYear+1; nextMonth=0; } else { nextYear=nowYear; } currDate=new Date(nowYear,nowMonth,1); nextDate=new Date(nextYear,nextMonth,1); theMaxDay=(nextDate-currDate)/(24*60*60*1000); return theMaxDay; } function CalendargetPos(el,ePro) /// Get Absolute Position { var ePos=0; while(el!=null) { ePos+=el["offset"+ePro]; el=el.offsetParent; } return ePos; } function CalendarDblNum(num) { if(num%26lt;10) return "0"+num; else return num; } function CalendarCancel(oInstance) ///Cancel { CalendarDiv=document.all[oInstance.sDIVID]; CalendarDiv.style.display="none"; } %26lt;/script%26gt; %26lt;/head%26gt; %26lt;BODY %26gt; %26lt;script %26gt; var oCalendarEn=new PopupCalendar("oCalendarEn"); //初始化控件时,请给出实例名称如:oCalendarEn oCalendarEn.Init(); var oCalendarChs=new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六"); oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); oCalendarChs.oBtnTodayTitle="今天"; oCalendarChs.oBtnCancelTitle="取消"; oCalendarChs.Init(); %26lt;/script%26gt; %26lt;br%26gt;%26lt;br%26gt;%26lt;br%26gt;%26lt;br%26gt; 　　　%26lt;input readonly type="text" name="dd" id="aa" onClick="getDateString(this,oCalendarEn)" value="English Version"%26gt; %26lt;br%26gt;%26lt;br%26gt;%26lt;br%26gt;%26lt;br%26gt; 　　　%26lt;input readonly type="text" name="dd" id="aa" onClick="getDateString(this,oCalendarChs)" value="中文界面版"%26gt; %26lt;/BODY%26gt; %26lt;/<a href="http://edu.xinasp.com/web/list_76_1.html" target="_blank" class="keylink">HTML</a>%26gt;