分享
 
 
 

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

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<HTML>

<HEAD>

<TITLE>有用的中英文日历网页特效代码-knowsky.com</TITLE>

<!--<script language="javascript" src="PopupCalendar.js" ></script>-->

<script>

//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;

///HTMLObject

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="<div id='"+this.sDIVID+"' style='display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'>";

htmlAll+="<div align='center'>";

/// Month

htmloMonth="<select id='"+this.sMONTHID+"' onchange=CalendarMonthChange("+this.instanceName+") style='width:50%'>";

for(i=0;i<12;i++)

{

htmloMonth+="<option value='"+i+"'>"+this.monthSting[i]+"</option>";

}

htmloMonth+="</select>";

/// Year

htmloYear="<select id='"+this.sYEARID+"' onchange=CalendarYearChange("+this.instanceName+") style='width:50%'>";

for(i=this.startYear;i<=this.endYear;i++)

{

htmloYear+="<option value='"+i+"'>"+i+"</option>";

}

htmloYear+="</select></div>";

/// Day

htmloDayTable="<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'>";

else

htmloDayTable+="<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+=" onmouseover=CalendarCellsMsOver("+this.instanceName+")";

htmloDayTable+=" onmouseout=CalendarCellsMsOut("+this.instanceName+")";

htmloDayTable+=" onclick=CalendarCellsClick(this,"+this.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("+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>"

/// All

htmlAll=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,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<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 oTable

oTable=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 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&&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>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;

else

return num;

}

function CalendarCancel(oInstance)///Cancel

{

CalendarDiv=document.all[oInstance.sDIVID];

CalendarDiv.style.display="none";

}

</script>

</head>

<BODY >

<script >

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();

</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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有