漂亮的CSS变色日历

<style>

.cal_0 table{

border:none;

font-family:tahoma;

font-size:9px;

text-align:center;

}

.cal_0 th{

height:17;

background-image:e­xpression("url("+MyCal.color+"_h.gif)");

border-bottom:e­xpression("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:e­xpression("1 solid "+MyCal.ca);

width:100%;

height:100%;

}

.d1{

position:absolute;

color:e­xpression(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:e­xpression(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:e­xpression(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> </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> </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="单击页面空白以更换颜色 | http://soft.knowsky.com/"

</script>

• ·轻松把任何网页工具放进Windows Vist
• ·如何在Windows Vista系统中添加字体
• ·Windows Vista防火墙导致网络无法访
• ·针对ARP病毒攻击防治的进阶经验谈
• ·ARP防火墙优化设置图解
• ·Photoshop让mm的腿从画框里伸出来
• ·Photoshop将现成图案做成立体徽章
• ·在PowerPoint 2007里把PPT文档
• ·Sandboxie隔离病毒木马 上网下载安装再
• ·网页制作解惑:图象文件的路径