分享
 
 
 

相当于delphi的日历控件

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

file://calendar.js

<!--Start-->

var YearStr,MonthStr,DayStr,NowDayStr;

var WeekStr,week,week_one;

var WeekArr = new Array("星期日", "星期一", "星期二", "星期三","星期四", "星期五", "星期六");

var dt = new Date();

var showtype;

var caleX = 0;

var caleY = 0;

YearStr = dt.getYear();

MonthStr = dt.getMonth() + 1;

NowDayStr = DayStr = dt.getDate();

week = dt.getDay();

WeekStr = WeekArr[week];

document.write("<DIV id=idCalendar style='position:absolute;top:100px;left:100px;width:260px;border: #000000 1px solid;background-color: #ffffff;display:none'></DIV>");

function initCalendar(){

var CaleHTML="";

CaleHTML += "<TABLE border=0 cellspacing=0 cellpadding=1 width='100%'>";

CaleHTML += "<TR bgcolor=#33246C><TD><BUTTON onclick='prevMonth()' class=btn><span lang=EN-US style='font-family:Arial'>&#9668;</span></BUTTON></TD>";

CaleHTML += "<TD align=center><SPAN style='color:white'>"+ YearStr +"年"+ MonthStr +"月</SPAN></TD>"

CaleHTML += "<TD align=right><BUTTON onclick='nextMonth()' class=btn><span lang=EN-US style='font-family:Arial'>&#9658;</span></BUTTON></TD></TR>";

CaleHTML += "<TR><TD colspan=3>";

CaleHTML += "<TABLE border=0 cellspacing=0 cellpadding=0 width='100%'><TR>";

for(var i=0; i<WeekArr.length; i++){

CaleHTML += "<TD>" + WeekArr[i] + "</TD>";

}

CaleHTML += "</TR><TR><TD colspan=7><HR size=1 color=blank width='90%'></TD></TR>";

CaleHTML += bodyCalendar();

CaleHTML += "</TABLE>";

CaleHTML += "</TD></TR>";

CaleHTML += "<TR><TD colspan=3>今天是:<Font color=red>"+ dt.getYear() +"-"+ (dt.getMonth() + 1) +"-"+ dt.getDate() +"</font></TD></TR>";

CaleHTML += "</TABLE>";

return CaleHTML;

}

function bodyCalendar(){

var ResultStr = "<TR>";

var tempStr = "" + MonthStr + "/1/" + YearStr;

var d = new Date(tempStr);

week_one = d.getDay();

for(var i=0;i<week_one;i++){

ResultStr += "<TD></TD>";

}

var bYear = YearStr/4;

var maxDay;

switch(MonthStr){

case 1:

case 3:

case 5:

case 7:

case 8:

case 10:

case 12:

maxDay = 31;

break;

case 2:

if(bYear==0)

maxDay = 28;

else

maxDay = 29;

break;

default:

maxDay = 30;

break;

}

var k;

var bday;

for(var i=0;i<maxDay;i++){

if((i+1) == DayStr)

bday = "border: #006432 1px solid;";

file://else if((i+1) == NowDayStr)

file://bday = "border: #ff0000 1px solid;";

else

bday = "border: #ffffff 1px solid;";

BRStr = i+week_one+1;

if(BRStr>=7 && BRStr%7==0){

ResultStr += "<TD align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</TD></TR><TR>";

k=0;

}

else{

ResultStr += "<TD align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</TD>";

k+=1;

}

}

for(var i=0;i<7-k;i++){

ResultStr += "<TD></TD>";

}

ResultStr += "</TR>";

return ResultStr;

}

function prevMonth(){

MonthStr -= 1;

if(MonthStr == 0){

MonthStr = 12;

YearStr -= 1;

}

idCalendar.innerHTML = initCalendar();

}

function nextMonth(){

MonthStr += 1;

if(MonthStr > 12){

MonthStr = 1;

YearStr += 1;

}

idCalendar.innerHTML = initCalendar();

}

function TDMove(){

var obj = window.event.srcElement;

obj.style.setAttribute("border", "#005AB5 1px solid");

}

function TDOut(){

var obj = event.srcElement;

if(parseInt(obj.innerText) == DayStr)

obj.style.setAttribute("border","#006432 1px solid");

file://else if(parseInt(obj.innerText) == NowDayStr)

file://obj.style.setAttribute("border","#ff0000 1px solid");

else

obj.style.setAttribute("border","#ffffff 1px solid");

}

var tobj;

function showCalendar(stype){

showtype = stype;

var obj = event.srcElement;

var pobj = obj.parentElement;

tobj = pobj.childNodes(0);

v = tobj.value;

if(v != ""){

pos = v.indexOf("-");

if(pos != -1 && pos == 4){

YearStr = parseInt(v.substring(0,pos));

v = v.substring(pos+1,v.length);

}

pos = v.indexOf("-");

if(pos != -1){

MonthStr = parseInt(v.substring(0,pos));

v = v.substring(pos+1,v.length);

}

if(v.length>0)

DayStr = parseInt(v);

}

var objParent = obj.offsetParent;

var left = obj.offsetLeft;

var top = obj.offsetTop;

while(objParent.tagName.toUpperCase() != "BODY"){

left += objParent.offsetLeft;

top += objParent.offsetTop;

objParent = objParent.offsetParent;

}

left += obj.offsetWidth;

top += obj.offsetHeight;

idCalendar.style.top = top+1;

idCalendar.style.left = left-260;

caleX = left - 260;

caleY = top + 1;

idCalendar.innerHTML = initCalendar();

idCalendar.style.display="";

hideElement("SELECT");

/*var left = event.clientX;

var top = event.clientY;

idCalendar.style.top = top+5;

idCalendar.style.left = left-250;

idCalendar.innerHTML = initCalendar();

idCalendar.style.display="";*/

}

function TDClick(){

DayStr = event.srcElement.innerText;

if(showtype=="day"){

tobj.value = YearStr + "-" + MonthStr + "-" + DayStr;

}

else{

tobj.value = YearStr + "-" + MonthStr;

}

hideCalendar();

}

function getCaleToSec(){

var dt;

if(showtype=="day")

dt = new Date(MonthStr+"/"+DayStr+"/"+YearStr);

else

dt = new Date(MonthStr+"/1/"+YearStr);

var s = dt.getTime();

return s/1000;

}

function hideCalendar(){

idCalendar.style.display = "none";

showElement("SELECT");

}

function C_MouseUp(){

if(idCalendar == null)

return;

var top = parseInt(idCalendar.style.top);

var left = parseInt(idCalendar.style.left);

var wi = idCalendar.offsetWidth;

var he = idCalendar.offsetHeight;

var x = event.clientX;

var y = event.clientY;

var x1 = left + wi;

var y1 = top + he;

if(x>x1||x<left||y>y1||y<top){

hideCalendar();

showElement("SELECT");

}

}

function hideElement(elmID){

for (i = 0; i < document.all.tags(elmID).length; i++){

obj = document.all.tags(elmID)[i];

if (! obj || ! obj.offsetParent)

continue;

objLeft = obj.offsetLeft;

objTop = obj.offsetTop;

objParent = obj.offsetParent;

while (objParent.tagName.toUpperCase() != "BODY")

{

objLeft += objParent.offsetLeft;

objTop += objParent.offsetTop;

objParent = objParent.offsetParent;

}

if(caleX > (objLeft + obj.offsetWidth) || objLeft > (caleX + idCalendar.offsetWidth))

;

else if(objTop > (caleY + idCalendar.offsetHeight))

;

else if(caleY > (objTop + obj.offsetHeight))

;

else

obj.style.visibility = "hidden";

}

}

function showElement(elmID){

for (i = 0; i < document.all.tags(elmID).length; i++){

obj = document.all.tags(elmID)[i];

if (! obj || ! obj.offsetParent)

continue;

obj.style.visibility = "";

}

}

document.onmouseup = C_MouseUp;

<!--End-->

日历测试 BODY { BACKGROUND-COLOR: #ffffff; COLOR: #000000; FONT-FAMILY: "宋体","Arial"; FONT-SIZE: 12px; MARGIN: 0px}TD { FONT-FAMILY: "宋体", "Tahoma"; FONT-SIZE: 12px}.bk { BACKGROUND-COLOR: #f1f1f1; BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #333333 1px solid; BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #333333 1px solid; COLOR: #0000cc; FONT-FAMILY: "宋体","Arial"}.btn { BACKGROUND-COLOR: #d6d6d6; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #eeeeee 1px solid; BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #eeeeee 1px solid; COLOR: #000066; FONT-FAMILY: "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none;background-image: url(buttonface.gif);}'file://TestCale.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 日历测试 </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>BODY { BACKGROUND-COLOR: #ffffff; COLOR: #000000; FONT-FAMILY: "宋体","Arial"; FONT-SIZE: 12px; MARGIN: 0px}TD { FONT-FAMILY: "宋体", "Tahoma"; FONT-SIZE: 12px}.bk { BACKGROUND-COLOR: #f1f1f1; BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #333333 1px solid; BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #333333 1px solid; COLOR: #0000cc; FONT-FAMILY: "宋体","Arial"}.btn { BACKGROUND-COLOR: #d6d6d6; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #eeeeee 1px solid; BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #eeeeee 1px solid; COLOR: #000066; FONT-FAMILY: "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none;background-image: url(buttonface.gif);}</style><SCRIPT LANGUAGE="JavaScript" src="calendar.js"></SCRIPT></HEAD>

<BODY>

<p>&nbsp;</p>

<FORM METHOD=POST ACTION="">

<TABLE width="80%" align=center>

<TR>

<TD width=150>&nbsp;</TD>

<TD align=center>

<INPUT TYPE="text" NAME="day" class=bk><INPUT TYPE="button" value="▼" class=btn onclick="showCalendar('day')">

</TD>

<TD width=150>&nbsp;</TD>

</TR>

</TABLE>

</FORM>

</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- 王朝網路 版權所有