js 日历

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<base href=http://mozart0.uni.cc/cal/ >
<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" οnclick="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" οnclick="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" οnclick="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" οnclick="CalOb.chgMonth(1)"></td>'+
   '   </tr></table>'+
   ' </div>'+
   ' <div class="sel cc scroll" id=selYear style="left:45;width:60" οnclick="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" οnclick="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 οnclick='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.οnmοuseοver=function(){
    selYear.style.display="block";
    }
   oYear.οnmοuseοut=function(){
    if(event.offsetY<10)
     selYear.style.display="none";
    }
   oMonth.οnmοuseοver=function(){
    selMonth.style.display="block";
    }
   oMonth.οnmοuseοut=function(){
    if(event.offsetY<10)
     selMonth.style.display="none";
    }
   selYear.οnmοuseοut=selOut;
   selYear.οnmοuseοver=selOver;
   selMonth.οnmοuseοut=selOut;
   selMonth.οnmοuseοver=selOver;
   var t=document.all.imgArr;
   for(var i=0;i<t.length;i++){
    t[i].οnmοusedοwn=imgDown;
    t[i].οnmοuseup=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.οnclick=function(){
if(event.srcElement.tagName!=="BODY")
   return;
tt.setColor(colortable[cc++]);
if(cc==colortable.length)
   cc=0;
}
document.body.title="单击页面空白以更换颜色"
</script>

 <BODY>
 
 </BODY>
</HTML>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页