一个非常漂亮的js日历,可按月变换色彩

稿源：互联网 2022-04-16 15:48:17 点击： 1566 撤稿纠错

一个非常漂亮的js日历,可按月变换色彩，图片暂时不能显示，但是特效还是正常的，您自己找个喜欢的图片来添加上去吧。

以下讨论的是和js 日历相关的一个非常漂亮的js日历,可按月变换色彩教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<base href=http://www.alixixi.com > <style> .cal_0 table{ border:none; font-family:tahoma; font-size:9px; text-align:center; } .cal_0 th{ height:17; background-image:expression("url("+MyCal.color+"_h.gif)"); border-bottom:expression("1 solid "+MyCal.ca); } .cal_0{ background-image:url(shadow.gif); width:168; height:131; cursor:default; padding:3 4 5 3; position:absolute; } .cal_1{ border:expression("1 solid "+MyCal.ca); width:100%; height:100%; } .d1{ position:absolute; color:expression(MyCal.cb); font-size:96px; font-family:Arial black; font-weight:bolder; left:0; top:-9; width:160; text-align:center; overflow:hidden; z-index:-1; } .d5{ position:absolute; left:45; top:108; width:60; height:13; } .d6{ position:absolute; left:108; top:108; width:48; height:13; } .cc{ border-color:expression(MyCal.ca); border-width:1; border-style:solid; line-height:9px; } .sel{ position:absolute; border-top:none; top:121; height:135; overflow:hidden; background-color:white; overflow-y:auto; display:none; } .selitem{ font-family:tahoma; font-size:9px; line-height:11px; text-align:left; } .p1{ padding-left:19; } .p2{ padding-left:16; } .scroll{ scrollbar-3dlight-color:expression(MyCal.ca); scrollbar-arrow-color:white; scrollbar-face-color:white; scrollbar-shadow-color:white; scrollbar-track-color:white; } </style> <script> MyCal.color="green"; MyCal.ca="#99cc00"; MyCal.cb="#e5f5e5"; function MyCal(numYear,numMonth,numDate){ if(typeof(oMain)!='undefined'){ alert("one instance of MyCal per page only") return null; } var arg=MyCal.arguments; if(arg.length==3){ this.year=arg[0]; this.month=arg[1]; this.date=arg[2]; } else{ var t=new Date(); this.year=t.getYear(); this.month=t.getMonth(); this.date=t.getDate(); } this.green=["#99cc00","#e5f5e5"]; this.blue=["#00ccff","#e5eff5"]; this.yellow=["#ffcc00","#ffefef"]; this.gray=["#999999","#f0f0f0"]; this.DayName="Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(","); this.MonthDay=[[31,28,31,30,31,30,31,31,30,31,30,31],[31,29,31,30,31,30,31,31,30,31,30,31]]; this.MonthName="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(","); for(var i in this.MonthName) this.MonthName[this.MonthName[i]]=i; this.setColor=function(str){ if(typeof(this[str])=="undefined"){ alert("no such color:"+str); return; } if(typeof(oYear)!="undefined"){ var t=document.all("imgArr"); for(var i=0;i<t.length;i++) t[i].src=t[i].src.replace(MyCal.color,str); } MyCal.color=str; MyCal.ca=this[str][0]; MyCal.cb=this[str][1]; } this.chgYear=function(d){ var m=oYear.innerText; this.year=parseInt(m)+d; this.refresh(); } this.chgMonth=function(d){ var i=parseInt(this.MonthName[oMonth.innerText])+d; if(i==12) i=0; else if(i==-1) i=11; this.month=i; this.refresh(); } this.chgDate=function(ob){ if(ob==event.srcElement) return; var x=event.srcElement.innerText; if(x==" ") return; oDate.cells[this.date+this.day+7].style.fontWeight="normal"; this.date=parseInt(x); event.srcElement.style.fontWeight="bold"; } this.setDate=function(ob){ var y0=this.year,m0=this.month; if(ob==event.srcElement) return; var t=ob.id.replace("sel","").toLowerCase(); var x=event.srcElement.innerText; this[t]=parseInt(t=="year"?x:this.MonthName[x]); ob.style.display="none"; if(y0!=this.year||m0!=this.month) this.refresh(); } this.refresh=function(){ oMonth.innerText=this.MonthName[this.month]; oYear.innerText=this.year; oBg.innerText=this.month+1; oMain.filters[0].apply(); oMain.innerHTML=this.drawTable(); oDate.cells[this.date+this.day+7].style.fontWeight="bold"; oMain.filters[0].play(); } this.outPut=function(){ var str='<div class="cal_0" id=oCal onselectstart="return false;">'+ ' <div class=d1 id=oBg>'+(this.month+1)+'</div>'+ ' <table class="cal_1" cellspacing=0 cellpadding=0>'+ ' <tr>'; for(var i=0;i<7;i++) str+='<th>'+this.DayName[i]+'</th>'; str+= ' </tr>'+ ' <tr><td colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)">'+ this.drawTable()+ ' </td><tr>'+ ' <td colspan=7>&nbsp;</td>'+ ' </tr>'+ ' </table>'+ ' <div class="d5 cc">'+ ' <table cellpadding=0 cellspacing=0><tr>'+ ' <td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgYear(-1)"></td>'+ ' <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear>'+this.year+'</td>'+ ' <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgYear(1)""></td>'+ ' </tr></table>'+ ' </div>'+ ' <div class="d6 cc">'+ ' <table cellpadding=0 cellspacing=0><tr>'+ ' <td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgMonth(-1)"></td>'+ ' <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth>'+this.MonthName[this.month]+'</td>'+ ' <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgMonth(1)"></td>'+ ' </tr></table>'+ ' </div>'+ ' <div class="sel cc scroll" id=selYear style="left:45;width:60" onclick="CalOb.setDate(this)">'; for(var i=2001;i<2050;i++) str+='<div class="selitem p1">'+i+'</div>'; str+= ' </div>'+ ' <div class="sel cc" id=selMonth style="left:108;width:48" onclick="CalOb.setDate(this)">'; for(var i=0;i<12;i++) str+='<div class="selitem p2">'+this.MonthName[i]+'</div>'; str+= ' </div>'+ '</div>'; document.write(str); CalOb=this; oDate.cells[this.date+this.day+7].style.fontWeight="bold"; oDate.cells[this.date+this.day+7].style.fontSize="12px"; attchEvent(); } this.drawTable=function(){ var day=new Date(this.year,this.month,1); day=day.getDay(); this.day=day-1; var m=this.year%4==0&&this.year%100||this.year%400==0?1:0; m=this.MonthDay[m][this.month]; var r="<table style='table-layout:fixed' cellpadding=0 cellpacing=0 id=oDate onclick='CalOb.chgDate(this)'>"; r+="<tr height=3><td width=20></td><td width=23></td><td width=23></td>"+ "<td width=23></td><td width=20></td><td></td><td></td></tr>"; for(var i=0,k=0;i<6;i++){ r+="<tr>"; for(var j=0;j<7;j++){ var k=i*7+j+1; var ts="<td>&nbsp;</td>" if(k>day&&k<=m+day){ ts="<td"; if(j==0||j==6) ts+=" style='color:red'"; ts+=">"+(k-day)+"</td>"; } r+=ts; } r+="</tr>"; } r+="</table>"; return r; } function attchEvent(){ oYear.onmouseover=function(){ selYear.style.display="block"; } oYear.onmouseout=function(){ if(event.offsetY<10) selYear.style.display="none"; } oMonth.onmouseover=function(){ selMonth.style.display="block"; } oMonth.onmouseout=function(){ if(event.offsetY<10) selMonth.style.display="none"; } selYear.onmouseout=selOut; selYear.onmouseover=selOver; selMonth.onmouseout=selOut; selMonth.onmouseover=selOver; var t=document.all.imgArr; for(var i=0;i<t.length;i++){ t[i].onmousedown=imgDown; t[i].onmouseup=imgUp; } } function imgDown(){ this.src=this.src.replace(/.{5}$/,"1.gif"); } function imgUp(){ this.src=this.src.replace(/.{5}$/,"0.gif"); } function selOver(){ var ob=event.srcElement; if(ob==this) return; ob.style.backgroundColor=MyCal.cb; } function selOut(){ var ob=event.srcElement; if(ob==this) this.style.display="none"; else ob.style.backgroundColor="white"; } } </script> <script> var tt=new MyCal(); tt.setColor("blue");// tt.outPut(); var colortable=["green","blue","yellow","gray"]; var cc=0; document.body.onclick=function(){ if(event.srcElement.tagName!=="BODY") return; tt.setColor(colortable[cc++]); if(cc==colortable.length) cc=0; } document.body.title="单击页面空白以更换颜色" </script> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于一个非常漂亮的js日历,可按月变换色彩的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080601691.shtml方便下次再访问哦。

·上一篇： 输入框的日期格式提示效果
·下一篇： 实现每天上午10点钟，定时弹出窗口提醒信息

一个非常漂亮的js日历,可按月变换色彩

文章分类LIST >>返回首页

最新游戏

最新新闻