网站首页 > 网页设计教程 > 网页特效 > 小巧玲珑的网页中的常用的小日历[网页特效]

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

作者：互联网
时间：2009-06-20 16:18:48

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

上一篇：网页中实用的中英文日历网页特效代码

下一篇：非常实用的作为表单输入日期选择的特效

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

相关阅读

最新文章

人气下载推荐

相关应用

热门文章

推荐游戏