CSS日历-漂亮变色
<style> <script> <script> var colortable=["green","blue","yellow","gray"];
.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{[来源 www.iocblog.net]
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>
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>
var tt=new mycal();
tt.setcolor("blue");//
tt.output();
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://www.iocsoft.net/"
</script>
Tag: 日历
文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。