漂亮的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(&qu

<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" ></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" "></td>'+
　　　  '　　　  </tr></table>'+
　　　  '　  </div>'+
　　　  '　  <div class="d6 cc">'+
　　　  '　　　  <table cellpadding=0 cellspacing=0><tr>'+
　　　  '　　　　　  <td><img id=imgArr src="'+MyCal.color+'_al0.gif" ></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" ></td>'+
　　　  '　　　  </tr></table>'+
　　　  '　  </div>'+
　　　  '　  <div class="sel cc scroll" id=selYear style="left:45;width:60" >';
　　　　　　　  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" >';
　　　　　　　  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 >";
　　　  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.cncms.com/"
</script>