首页 > 代码库 > 网页中实用的中英文日历网页特效代码

网页中实用的中英文日历网页特效代码

<HTML><HEAD><TITLE>有用的中英文日历网页特效代码-草坪基地-上谷战国红</TITLE><!--<script language="javascript" src="http://www.mamicode.com/PopupCalendar.js" ></script>--><script>//more from webjx.comfunction PopupCalendar(InstanceName){///Global Tagthis.instanceName=InstanceName;///Propertiesthis.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;///Cssthis.divBorderCss="1px solid #BCD0DE";this.tableBorderColor="#CCCCCC"///Methodthis.Init=CalendarInit;this.Fill=CalendarFill;this.Refresh=CalendarRefresh;this.Restore=CalendarRestore;///HTMLObjectthis.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,sYearsMonth=this.currDate.getMonth();sYear=this.currDate.getYear();htmlAll="<div id=‘"+this.sDIVID+"‘ style=‘display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF‘>";htmlAll+="<div align=‘center‘>";/// MonthhtmloMonth="<select id=‘"+this.sMONTHID+"‘ onchange=CalendarMonthChange("+this.instanceName+") style=‘width:50%‘>";for(i=0;i<12;i++){htmloMonth+="<option value=http://www.mamicode.com/‘"+i+"‘>"+this.monthSting[i]+"</option>";}htmloMonth+="</select>";/// YearhtmloYear="<select id=‘"+this.sYEARID+"‘ onchange=CalendarYearChange("+this.instanceName+") style=‘width:50%‘>";for(i=this.startYear;i<=this.endYear;i++){htmloYear+="<option value=http://www.mamicode.com/‘"+i+"‘>"+i+"</option>";}htmloYear+="</select></div>";/// DayhtmloDayTable="<table id=‘"+this.sTABLEID+"‘ width=‘100%‘ border=0 cellpadding=0 cellspacing=1 bgcolor=‘"+this.tableBorderColor+"‘>";htmloDayTable+="<tbody bgcolor=‘#ffffff‘style=‘font-size:13px‘>";for(i=0;i<=6;i++){if(i==0)htmloDayTable+="<tr bgcolor=‘#98B8CD‘>";elsehtmloDayTable+="<tr>";for(j=0;j<7;j++){if(i==0){htmloDayTable+="<td height=‘20‘ align=‘center‘ valign=‘middle‘ style=‘cursor:hand‘>";htmloDayTable+=this.weekDaySting[j]+"</td>"}else{htmloDayTable+="<td height=‘20‘ align=‘center‘ valign=‘middle‘ style=‘cursor:hand‘";htmloDayTable+=" onm ouseover=CalendarCellsMsOver("+this.instanceName+")";htmloDayTable+=" onm ouseout=CalendarCellsMsOut("+this.instanceName+")";htmloDayTable+=" onclick=CalendarCellsClick(this,"+this.instanceName+")>";htmloDayTable+=" </td>"}}htmloDayTable+="</tr>";}htmloDayTable+="</tbody></table>";/// Today ButtonhtmloButton="<div align=‘center‘ style=‘padding:3px‘>"htmloButton+="<button style=‘width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand‘"htmloButton+=" onclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button> "htmloButton+="<button style=‘width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand‘"htmloButton+=" onclick=CalendarCancel("+this.instanceName+")>"+this.oBtnCancelTitle+"</button> "htmloButton+="</div>"/// AllhtmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+"</div>";document.write(htmlAll);this.Fill();}function CalendarFill()            ///{var sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,sDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYearsMonth=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<oSelectYear.length;i++){if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i;}////for(sDaySn=1,sIndex=sWeekDay;sIndex<=6;sDaySn++,sIndex++){if(sDaySn==sToday){currRow.cells[sIndex].innerHTML="<font color=red><i><b>"+sDaySn+"</b></i></font>";this.oPreviousCell=currRow.cells[sIndex];}else{currRow.cells[sIndex].innerHTML=sDaySn;currRow.cells[sIndex].style.color="#666666";}CalendarCellSetCss(0,currRow.cells[sIndex]);}for(rowIndex=2;rowIndex<=6;rowIndex++){if(sDaySn>MaxDay)break;currRow=oTable.rows[rowIndex];for(cellIndex=0;cellIndex<currRow.cells.length;cellIndex++){if(sDaySn==sToday){currRow.cells[cellIndex].innerHTML="<font color=red><i><b>"+sDaySn+"</b></i></font>";this.oPreviousCell=currRow.cells[cellIndex];}else{currRow.cells[cellIndex].innerHTML=sDaySn;currRow.cells[cellIndex].style.color="#666666";}CalendarCellSetCss(0,currRow.cells[cellIndex]);sDaySn++;if(sDaySn>MaxDay)break;}}}function CalendarRestore()                    /// Clear Data{var oTableoTable=document.all[this.sTABLEID]for(i=1;i<oTable.rows.length;i++){for(j=0;j<oTable.rows[i].cells.length;j++){CalendarCellSetCss(0,oTable.rows[i].cells[j]);oTable.rows[i].cells[j].innerHTML=" ";}}}function CalendarRefresh(newDate)                    ///{this.currDate=newDate;this.Restore();this.Fill();}function CalendarCellsMsOver(oInstance)                /// Cell MouseOver{var myCellmyCell=event.srcElement;CalendarCellSetCss(0,oInstance.oPreviousCell);if(myCell){CalendarCellSetCss(1,myCell);oInstance.oPreviousCell=myCell;}}function CalendarCellsMsOut(oInstance)                ////// Cell MouseOut{var myCellmyCell=event.srcElement;CalendarCellSetCss(0,myCell);}function CalendarCellsClick(oCell,oInstance){var sDay,sMonth,sYear,newDatesYear=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 sDateStringif(oInstance.oTaget.tagName=="INPUT"){oInstance.oTaget.value=sDateString;}document.all[oInstance.sDIVID].style.display="none";}function CalendarYearChange(oInstance)                /// Year Change{var sDay,sMonth,sYear,newDatesDay=oInstance.currDate.getDate();sMonth=oInstance.currDate.getMonth();sYear=document.all[oInstance.sYEARID].valuenewDate=new Date(sYear,sMonth,sDay);oInstance.Refresh(newDate);}function CalendarMonthChange(oInstance)                /// Month Change{var sDay,sMonth,sYear,newDatesDay=oInstance.currDate.getDate();sMonth=document.all[oInstance.sMONTHID].valuesYear=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&&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: onm ouserOut 1: onm ouseOverif(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,theMaxDaynextMonth=nowMonth+1;if(nextMonth>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<10)return "0"+num;elsereturn num;}function CalendarCancel(oInstance)            ///Cancel{CalendarDiv=document.all[oInstance.sDIVID];CalendarDiv.style.display="none";}</script></head><BODY ><script >var oCalendarEn=new PopupCalendar("oCalendarEn");    //初始化控件时,请给出实例名称如:oCalendarEnoCalendarEn.Init();var oCalendarChs=new PopupCalendar("oCalendarChs");    //初始化控件时,请给出实例名称:oCalendarChsoCalendarChs.weekDaySting=new Array("","","","","","","");oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");oCalendarChs.oBtnTodayTitle="今天";oCalendarChs.oBtnCancelTitle="取消";oCalendarChs.Init();</script><br><br><br><br>   <input readonly type="text" name="dd" id="aa" onClick="getDateString(this,oCalendarEn)" value="English Version"><br><br><br><br>   <input readonly type="text" name="dd" id="aa" onClick="getDateString(this,oCalendarChs)" value="中文界面版"></BODY></HTML>

 

网页中实用的中英文日历网页特效代码