资源描述
蓝色日历.docx
《蓝色日历.docx》由会员分享,可在线阅读,更多相关《蓝色日历.docx(19页珍藏版)》请在冰豆网上搜索。
蓝色日历
非常實用的選擇輸入日期的特效
--
//====================================================參數設定部分=======================================================
varbMoveable=true;//設置日曆是否可以拖動
var_VersionInfo="Version:
2.0"//版本資訊
//====================================================WEB頁面顯示部分=====================================================
varstrFrame;//存放日曆層的HTML代碼
document.writeln('absolute;width:
186;height:
247;z-index:
9998;display:
none">');
strFrame='';
strFrame+='';
strFrame+='vardatelayerx,datelayery;/*存放日曆控制項的滑鼠位置*/';
strFrame+='varbDrag;/*標記是否開始拖動*/';
strFrame+='functiondocument.onmousemove()/*在滑鼠移動事件中,如果開始拖動日曆,則移動日曆*/';
strFrame+='{if(bDrag&&window.event.button==1)';
strFrame+='{varDateLayer=parent.document.all.webjxDateLayer.style;';
strFrame+='DateLayer.posLeft+=window.event.clientX-datelayerx;/*由於每次移動以後滑鼠位置都恢復為初始的位置,因此寫法與div中不同*/';
strFrame+='DateLayer.posTop+=window.event.clientY-datelayery;}}';
strFrame+='functionDragStart()/*開始日曆拖動*/';
strFrame+='{varDateLayer=parent.document.all.webjxDateLayer.style;';
strFrame+='datelayerx=window.event.clientX;';
strFrame+='datelayery=window.event.clientY;';
strFrame+='bDrag=true;}';
strFrame+='functionDragEnd(){/*結束日曆拖動*/';
strFrame+='bDrag=false;}';
strFrame+='';
strFrame+='9999;position:
absolute;left:
0;top:
0;"onselectstart="returnfalse">9999;position:
absolute;top:
3;left:
19;display:
none">';
strFrame+='9999;position:
absolute;top:
3;left:
78;display:
none">';
strFrame+='dropshadow(color=#EDEDF8,offx=3.3,offy=3.3,positive=1);"cellSpacing="0"cellPadding="0"width="100%"border="0">
'; //控制項邊框顏色 strFrame+=''; strFrame+=''; strFrame+='12px;cursor: hand;color: #ffffff"'; strFrame+='onclick="parent.webjxPrevM()"title="向前翻1月"Author=webjx><'; strFrame+=' | 12px;cursor:
default"Author=webjx';
strFrame+='onmouseover="style.backgroundColor=\'#D7E1F0\'"onmouseout="style.backgroundColor=\'white\'"';
strFrame+='onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))"title="點擊這裏選擇年份">';
strFrame+='12px;cursor:
default"Author=webjxonmouseover="style.backgroundColor=\'#D7E1F0\'"';
strFrame+='onmouseout="style.backgroundColor=\'white\'"onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?
this.innerText.substring(0,1):
this.innerText.substring(0,2))"';
strFrame+='title="點擊這裏選擇月份">';
strFrame+='12px;cursor:
hand;color:
#ffffff"';
strFrame+='onclick="parent.webjxNextM()"title="向後翻1月"Author=webjx>>
';
strFrame+='';
strFrame+='';
strFrame+=''onmousedown="DragStart()"onmouseup="DragEnd()"':
'');
strFrame+='BORDERCOLORLIGHT=#3677b1bgcolor=#5168C8BORDERCOLORDARK=#FFFFFFwidth="100%"height=25Author="wayx"style="cursor:
'+(bMoveable?
'move':
'default')+'">';
strFrame+='12px;color:
#FFFFFF"Author=webjx>日';
strFrame+='12px;color:
#FFFFFF"Author=webjx>一12px;color:
#FFFFFF"Author=webjx>二';
strFrame+='12px;color:
#FFFFFF"Author=webjx>三12px;color:
#FFFFFF"Author=webjx>四';
strFrame+='12px;color:
#FFFFFF"Author=webjx>五12px;color:
#FFFFFF"Author=webjx>六';
strFrame+='
--Author:
F.R.Huang(webjx)mail:
webjx@2002-10-8-->';
strFrame+='';
strFrame+='';
varn=0;for(j=0;j<5;j++){strFrame+='';for(i=0;i<7;i++){
strFrame+='12px"Author=webjxonclick=parent.webjxDayClick(this.innerText,0)>';n++;}
strFrame+='';}
strFrame+='';
for(i=35;i<39;i++)strFrame+='12px"Author=wayxonclick="parent.webjxDayClick(this.innerText,0)">';
strFrame+='12px;cursor:
hand"';
strFrame+='Author=webjxtitle="'+_VersionInfo+'">關閉';
strFrame+='';
strFrame+='';
strFrame+='hand"value="<<"title="向前翻1年"onclick="parent.webjxPrevY()"';
strFrame+='onfocus="this.blur()"style="font-size:
12px;height:
20px">strFrame+='value="<"style="cursor:
hand"onclick="parent.webjxPrevM()"onfocus="this.blur()"style="font-size:
12px;height:
20px">
strFrame+='Author=webjxalign=center>hand"type=buttonclass=buttonvalue=Todayonclick="parent.webjxToday()"'; strFrame+='onfocus="this.blur()"title="當前日期"style="font-size: 12px;height: 20px;cursor: hand"> | strFrame+='Author=webjxalign=right>"style="cursor: hand"onclick="parent.webjxNextM()"'; strFrame+='onfocus="this.blur()"title="向後翻1月"class=buttonstyle="font-size: 12px;height: 20px"> strFrame+='Author=webjxtype=buttonclass=buttonstyle="cursor: hand"value=">>"title="向後翻1年"onclick="parent.webjxNextY()"'; strFrame+='onfocus="this.blur()"style="font-size: 12px;height: 20px"> | ';
strFrame+='
';
window.frames.webjxDateLayer.document.writeln(strFrame);
window.frames.webjxDateLayer.document.close();//解決ie進度條不結束的問題
//====================================================WEB頁面顯示部分======================================================
varoutObject;
varoutButton;//點擊的按鈕
varoutDate="";//存放對象的日期
varodatelayer=window.frames.webjxDateLayer.document.all;//存放日曆對象
functionsetday(tt,obj)//主調函數
{
if(arguments.length>2){alert("對不起!
傳入本控制項的參數太多!
");return;}
if(arguments.length==0){alert("對不起!
您沒有傳回本控制項任何參數!
");return;}
vardads=document.all.webjxDateLayer.style;
varth=tt;
varttop=tt.offsetTop;//TT控制項的定位點高
varthei=tt.clientHeight;//TT控制項本身的高
vartleft=tt.offsetLeft;//TT控制項的定位點寬
varttyp=tt.type;//TT控制項的類型
while(tt=tt.offsetParent){ttop+=tt.offsetTop;tleft+=tt.offsetLeft;}
dads.top=(ttyp=="image")?
ttop+thei:
ttop+thei+6;
dads.left=tleft;
outObject=(arguments.length==1)?
th:
obj;
outButton=(arguments.length==1)?
null:
th;//設定外部點擊的按鈕
//根據當前輸入框的日期顯示日曆的年月
varreg=/^(\d+)-(\d{1,2})-(\d{1,2})$/;
varr=outObject.value.match(reg);
if(r!
=null){
r[2]=r[2]-1;
vard=newDate(r[1],r[2],r[3]);
if(d.getFullYear()==r[1]&&d.getMonth()==r[2]&&d.getDate()==r[3]){
outDate=d;//保存外部傳入的日期
}
elseoutDate="";
webjxSetDay(r[1],r[2]+1);
}
else{
outDate="";
webjxSetDay(newDate().getFullYear(),newDate().getMonth()+1);
}
dads.display='';
event.returnValue=false;
}
varMonHead=newArray(12);//定義陽曆中每個月的最大天數
MonHead[0]=31;MonHead[1]=28;MonHead[2]=31;MonHead[3]=30;MonHead[4]=31;MonHead[5]=30;
MonHead[6]=31;MonHead[7]=31;MonHead[8]=30;MonHead[9]=31;MonHead[10]=30;MonHead[11]=31;
varwebjxTheYear=newDate().getFullYear();//定義年的變數的初始值
varwebjxTheMonth=newDate().getMonth()+1;//定義月的變數的初始值
varwebjxWDay=newArray(39);//定義寫日期的陣列
functiondocument.onclick()//任意點擊時關閉該控制項//ie6的情況可以由下面的切換焦點處理代替
{
with(window.event)
{if(srcElement.getAttribute("Author")==null&&srcElement!
=outObject&&srcElement!
=outButton)
closeLayer();
}
}
functiondocument.onkeyup()//按Esc鍵關閉,切換焦點關閉
{
if(window.event.keyCode==27){
if(outObject)outObject.blur();
closeLayer();
}
elseif(document.activeElement)
if(document.activeElement.getAttribute("Author")==null&&document.activeElement!
=outObject&&document.activeElement!
=outButton)
{
closeLayer();
}
}
functionwebjxWriteHead(yy,mm)//往head中寫入當前的年與月
{
odatelayer.webjxYearHead.innerText=yy+"年";
odatelayer.webjxMonthHead.innerText=mm+"月";
}
functiontmpSelectYearInnerHTML(strYear)//年份的下拉清單
{
if(strYear.